Skip to content

Latest commit

 

History

History
129 lines (109 loc) · 4.35 KB

移动端适配rem.md

File metadata and controls

129 lines (109 loc) · 4.35 KB
Raw

rem从入门到精通

概念

视窗(viewport) 简单的理解, viewport是严格等于浏览器的窗口. 在桌面浏览器中, viewport就是浏览器窗口的宽高. 但是在移动端设备上就有点复杂了.

移动端的viewport太窄了, 为了能够好的为css布局服务, 所以提供了两个viewport:

  1. 虚拟的viewportvisualviewport.
  2. 布局的viewportlayoutviewport.

事实上viewport是一个很复杂的知识点, 可以阅读viewports剖析

物理像素(physical pixel) 物理像素又被称为设备像素, 他是显示设备中一个最微小的物理部件. 每个像素可以根据操作系统设置自己的颜色和亮度. 正式这些设备像素的微笑距离欺骗了我们肉眼看到的图像效果.

设备独立像素(density-independent pixel) 设备独立像素也被称为密度无关像素, 可以认为是计算机坐标系统中的一个点, 这个点代表一个可以由程序使用的虚拟像素(比如 css像素), 然后由相关系统转换为物理像素.

css像素 css像素是一个抽象单位, 主要使用在浏览器上, 用来精度度量web页面上的内容. 一般情况下, css像素称为与设备无关的像素(device-indenpendent pixel), 简称: DIPs.

屏幕密度 屏幕密度是指一个设备表面上存在的像素数量, 它通常以每英寸有多少像素来计算(PPI).

设备像素比(device pixel ratio) 设备像素比简称dpr, 其定义了屋里像素和设备独立像素的对应关系. 它的值可以按下面的公式计算得到:

设备像素比 = 物理像素 / 设备独立像素

计量单位

在web中的计量单位有px、em、rem、vh、vw等等诸多单位, 常用的也就三个:

  1. px.
  2. em.
  3. rem.

px

在web页面初期制作中以及很多新手大部分使用px来设置计量单位, 它准确、稳定. 设计图上显示多少在制作web时就设置多少.

em

em是一个相对值, 相对于父元素的值, 计算公式:

1 % 父元素的font-size * 需要转换的像素值 = em值

eg:

<ul>
    <li>
        <span></span>
    </li>
</ul>

<style>
    ul{
        font-size: 16px;
    }
    li{
        font-size: 1em; /* 16 * 1 = 16px */
        height: 2em; /* 16 * 2 = 32px */
    }
    span{
        font-size: 2em; /* 16 * 1 = 16px */
    }
</style>
<!-- 如果将li的font-size改变 -->
<style>
    ul{
        font-size: 16px;
    }
    li{
        font-size: 2em; /* 16 * 2 = 32px */
        height: 2em; /* 16 * 2 = 32px */
    }
    span{
        font-size: 2em; /* 那么是依据父元素li的font-size 32 * 1 = 32px */
    }
</style>

rem

CSS3的出现, 添加了一些新单位其中就包括rem. 一一一 font size of the root element.

rem也是一个相对单位, 它相对根元素<html>, 计算公式:

1 % 根元素元素(<html>)的font-size * 需要转换的像素值 = rem值

simple eg:

<style>
    html{
        font-size: 18px;
    }
    body{
        font-size: 2rem; /* 2 * 18 = 36px */
    }
    ul{
        font-size: 1.5rem; /* 1.5 * 18 = 27px */
    }
</style>

在根元素<html>中定义了基本字体大小为18px. 从上面计算结果来看, 使用rem就像用px一样的方便.

至于兼容性呢, 至今为止基本上移动端都兼容. rem兼容性

如果项目要考虑IE低版本的话可以针对做一定的处理:

<style>
    html{
        font-size: 18px;
    }
    body{
        font-size: 36px; font-size: 2rem; /* 2 * 18 = 36px */
    }
    ul{
        font-size: 27px; font-size: 1.5rem; /* 1.5 * 18 = 27px */
    }
</style>

这样做的不足点就是增加了代码量.

工程化

对于rem来说它不是万能的, 可以使用vw替代. 具体参考这里

我们项目中会使用手淘团队的flexible的方案.flexible;

换算比例为1rem = 75px;

IDE则是vscode, 搭配计算rem插件cssrem, 也算是用的很舒心.