Blog - wingsico

前言

历经好多时间= =,终于完成了一个小项目,再次更新了一些我的移动端知识,之前总是对概念有些不清晰,先梳理一下。

像素

概念

CSS像素(CSS Pixel)

CSS代码中的逻辑像素,是一个抽象的东西,实际并不存在。

设备独立像素(Device Independent Pixel)

与设备无关的逻辑像素,可以通过虚拟程序来设置,包含了CSS像素

设备像素(Device Pixel)

物理像素,设备能控制显示的最小单位,类似1920 * 1080像素分辨率这种的。

关系

设备像素与设备独立像素

对于PC页面:在未缩放的情况下,1设备像素 === 1设备独立像素,若缩放为200%时,可以说 2设备像素 === 1设备独立像素对于移动端页面: 根据设备不同有一些差异,其引起差异的原因主要在于一个被称之为ppi(pixel per inc)的东西。

PPI

从名字上就知道是 每英寸设备有多少像素,这里的像素指的是设备像素,即物理像素,其数值越高,每英寸设备里的像素就越高,画面也就越清晰。 计算方式为: PPI计算 像苹果的Retina屏的ppi就比较高,所以清晰度很高。 还有一个很重要的概念就是dpr(device pixel ratio)

DPR

设备像素比,这个设备像素比就是物理像素独立像素,独立像素之前说到,包含着CSS像素,所以dpr即提供了一个我们代码中的像素与设备实际像素之间的一个转换关系。 计算公式:

dpr = 设备像素 / 设备独立像素

像苹果手机的dpr一般为2,即意味着1长度的设备像素里有2长度的设备独立像素,换做面积来算的话就是1设备像素包含着4设备独立像素,即成平方关系,所以清晰明了,dpr越高,屏幕清晰度也越高,与ppi有些相似,用一张图看看: DPR 大概需要了解的就这些,我在实际运用中用到的也就如下几点:

  1. dpr
  2. px
  3. device-width (屏幕宽度)

运用

对于dpr,一般用于两个地方,一个是字体大小,一个是背景图片大小 对于字体,也是用px堆起来的,因此dpr也会影响到字体的显示,当dpr较大时,为了同比例显示字体大小,就会去检测其dpr的值,根据dpr的不同来设置不同比例的字体大小,可以用如下一段sass的混合宏来适配字体显示:

@mixin font-dpr($font-size) {
  font-size: $font-size / 2;
  [data-dpr="2"] & {
    font-size: $font-size;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 3 / 2;
  }
}

这里有个data-dpr,即根据dpr不同来应用不同的字体样式,此外,这里将传入的字体大小除以2,这是因为一般设计给的视觉稿都是iphone6的二倍稿,因此,为了显示正常字体大小,将其标注的字体大小除以二,再根据dpr来适配字体大小。 移动端运用到图片几乎是必然的,一般设计师会给出两种图片,一种为@2x图,一种为@3x图,不过这个主要是用来出来高清屏下图片较为高清的显示,对于普通的安卓机,dpr一直都是1,意义不大,用普通的@2x图即可达到高清的显示,但是对于ios系统,存在dpr为2、dpr为3的情况,为了图片的一个等比例缩放,我们根据dpr的不同来使用不同倍数的图片以达到与标准屏幕一致的感受。同样的,我们也可以使用sass的混合宏来适配背景图片:

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}

除这两点之外,我暂时没有用到dpr其他的使用方法。

布局适配

布局和适配其实我一直难以分辨这两个概念,我就把它罗列在一起吧。 为了达到想要的效果,我的历程如下:

  1. meta 设置 viewport -> width=device-width…
  2. rem布局
  3. flex-box
  4. flexible.js
  5. 视口单位vw,vh
  6. calc计算
  7. calc + 视口单位
  8. calc + 视口单位 + 媒体查询
  9. 百分比布局
  10. 删除 6、7、8, 9 重归flexible
  11. 加上媒体查询,适配特殊机型,如 Nexus 5X

妈耶心好累,布局适配改改改改好头疼,不过还好都解决了。

meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

这行代码作用是设置理想视口,什么是视口?什么又是理想视口,要说明这个,对于viewport就要讲很多了。 这里有一个链接,我觉得写的很好,很多内容都非常清晰的表达了出来: 移动端之viewport

rem布局

rempxem均是常用的单位,他们都是相对长度单位,在不同的地方我们需要配合起来使用。

px

px(Pixel) 是相对于屏幕分辨率而言的一个单位,一般我们对于pc均会使用px作为单位,同时,一些固定大小、长度的我们同样使用px作为单位,这个也是我们上面说到的CSS像素,包含在设备独立像素内。

em

em是一个相对与其父元素的字体大小的一个单位,举个例子

<style lang="scss">
    .parent {
        font-size: 18px;
        .child {
            font-size: 2em; // 18 * 2 = 36px
            .grandson {
                font-size: 0.5em; // 36 * 0.5 = 18px
            }
        }
    }
</style>

这个单位对于一整块整体变换有很好的效果,比如我们有一个按钮,当我们想要整体放大一个按钮的时候,不需要去改变每一个字体的大小,设置em之后可以只改变其父级元素的字体大小来达到整体缩放的效果。

rem

为了移动端而生的单位,同样是一个相对单位,与em不同的是,rem是相对于html根元素的字体大小,举个例子:

<style lang="scss">
    html {
        font-size: 10px;
        .parent {
            font-size: 2rem; // 10 * 2 = 20px
            .child {
                font-size: 4rem; // 10 * 4 = 40px
                .grandson {
                    font-size: 1.6rem; // 10 * 1.6 = 16px
                }
            }
        }
    }
</style>

有了这样一个单位,对于我们移动端上的适配来说,绝对是一大助力,我们可以使用rem来适配不同分辨率的屏幕。 现在假设我们有一张750的设计稿,我们把设计稿分成一百份,把每十份当做一个1rem,即设置:

html {
    font-size: 75px; // 750 / 100 * 10 = 75px
}

那么我们在需要一个150*150的div时,我们可以使用

.box {
    width: 2rem;
    height: 2rem;
}

当我们的屏幕不同的时候,我们只需动态的更改根元素的字体大小即可。那么如何动态更改根元素的字体大小呢?在CSS3有一个新增的媒体查询,可以帮我们检测设备相关信息并根据这些信息使用不同的样式。

@media/媒体查询

这里有相关的资料:MDN媒体查询 上面只是介绍了一些概念的东西,那么我们如何去使用媒体查询在我们的移动端适配上呢? 待续. 更新时间2017年12月23日10:35:14