从尺寸单位到移动端适配方案

发表于 | 分类于

css尺寸单位

绝对单位

在平常的前端开发中，在很多地方写css的时候，你都会用到长度尺寸单位，可能最典型的代表就是px；
其实这些单位主要分两类，绝对单位和相对单位；px就属于绝对单位，除了px之外，其他的你可能都很
少使用,如下：

  • mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
  • pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）

相对单位

上面列举的主要是绝对单位，那相对单位是啥呢，顾名思义，相对单位就是基于某些参考物的单位；主要有：

  • ex, ch: 分别是小写x的高度和数字0的宽度；
  • em, rem: em和rem都是基于font-size的单位，但又有所不同，em是基于当前元素的font-size为参考物
    的(如果当前font-size没有设置，就基于父元素，以此类推); rem是基于根元素为参考物，如果根元素没有设置，
    大多数浏览器默认为16px；假如参考物的font-size: 20px, 那么1em=20px, 1.5rem=30px;
  • vw, vh, vmin, vmax: 这组单位都是基于视口为参考物，vw基于视口的宽度，vh基于视口的高度，vmin=min(vw, vh),
    vmax=max(vw,vh)

在移动端的使用

目前市面的手机品类繁多，屏幕分辨率也各有不同，导致移动端开发难度加大，我们怎么开发来适配不同的手机？

rem

以iphone三种尺寸手机为例: iphone4(320px),iphone6(375px),iphone6 plus(414px);

普通的做法是根据不同比例的尺寸来等比例
缩放，例如iphone4文本大小是12px，那么iphone6就是（375/320*12px=14px）,iphone6 plus就是（414/320*12px=15.5px）;

最开始的方法： 以一款尺寸做一版样式，然后用js去控制viewpoint的intial-scale(网页缩放比例); 天猫最初站点就是用这种
方法来进行移动端的开发的，这样有些不好的地方，如手机为大屏幕的时候图片文字会拉伸，导致页面模糊,在某些布局在不同
尺寸的屏幕也有可能导致布局错乱；

为了最好的适配不同的手机尺寸，目前最普遍的做法就是应用到上一节说到的相对单位rem;

兼容性

先来看看rem的兼容性：

caniuse

从图中可以看出兼容性还是很不错的，大部分市面上主流浏览器都支持,我们可以比较放心的使用；

rem官方文档上https://www.w3.org/TR/css3-values/#rem的解释是：

rem unit

rem unit Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

实际就是根据根元素来设置字体大小，然后其他设置了rem单位的就是利用这个来进行同等的变换；

适配实现方案

方案1 - 动态添加html样式

1
2
3
4
5
6
(function() {
   var b = document.documentElement;
   var a = document.createElement("style");
   a.innerHTML = "html { font-size: " + ((b.clientWidth > 640 ? 640 : b.clientWidth) / 18.75) + "px !important; }";
   b.firstElementChild.appendChild(a)
})();

方案2 - 利用media query来设置

利用css的media query也是可以来实现font-size的设置，如：

1
2
3
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

方案3 - js动态设置

1
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

rem解决方案升级

上面几个方案我们就实现了动态设置font-size并根据rem实现移动端不同尺寸的适配；

但适用rem的方案还是有不足的地方的：

  1. 大屏幕伸缩之后可能导致页面模糊

  2. 设计稿里面的px都要转换成rem

如何解决这些问题呢？

提供高分辨率设计稿，一般采用的是宽度为750px的设计稿，刚好是375的两倍，并利用sass实现一个函数功能
为提供直接px到rem的转换;

1
2
3
4
@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}

设置基准font-size为75，传入参数px大小直接计算出rem的大小；

这样我们就可以完全按照视觉稿上的尺寸来了, 不用除于2了，就解决了图片高清问题，并且不用手动转换单位；

不过rem不是万能的，也还是具有不足之处的,如：

  1. 一个App里native界面和Web界面混合使用时，rem在不同尺寸屏幕上的适配与native界面适配不一致;

  2. rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致, 有些并不是理想的按照不同大小进行等比例缩放；

总结

本文我们一开始先讲了css尺寸单位，包括绝对单位与相对单位，并详细讲述了em和rem；接下来讲述了rem在现代
移动端开发的应用，最后讲述了rem的几种应用方案与不足之处；

最后祝大家双节快乐，祖国越来越强大！