移动端的web前端开发其实经常会有一些令人头疼的问题,比如屏幕适配、1像素问题等,rem也是之前在屏幕适配上比较完善的一套方案,但是随着业务的深入,任何方案都有其优秀与不足的地方,rem这套方案也一样,笔者今就来从自身项目的角度,简单的聊聊rem这整套方案的得与失。

  首先,介绍下原理:

  rem是什么?它是css3新推出的相对单位,英文全称为font size of the root element,意思就是根据网页的根元素来设置字体大小,和另一个em(font size of the element)根据父元素的字体大小来者是不同,它是根据根节点,也就是html元素来设置大小,举个简单的例子:

html{
font-size: 12px;
}
p{
width: 1rem; //实际长度 1 * 12 = 12px;
}

  也正由于这个机制,我们就能根据只改变根元素的fontSize这一个点的方式就能改变全局的设置了rem单位的元素的样式。

  但是,正如前面提到的,没有什么方案是没有副作用的,rem也是有副作用的:

  1、移动端对于浮点数的计算其实并不像pc那么精确。实际工作中我们经常会碰到根节点fontSize设置为10px,实际元素的属性值(如border: .1rem solid #000)有小数点的情况,这种情况下,虽然理论上的px值应该为1px,但是实际上很有可能就变成了0px(也就是视觉上不可见),也就是这个原因,也导致了rem的borderRadius的设置的圆看着像椭圆,所以'px'这个单位在这个背景下还是有它自己的使用空间,虽然这看上去甚至有一些违背使用rem的初衷。

  2、css绘制的图形可以rem,但是图片却不行。我们都知道,图片的清晰度需要在它的实际分辨率范围内才能够保证,如果任由rem设置图片宽高,被肆意拉伸的图片其实并不是我们想要的,所以在设置图片的时候还需要有另外的考量。

  3、有关rootElemenet元素的fontSize,并不是一直都那么准确,也即这套方案是有兼容性问题的。笔者的实际工作中就发现,有一些比较“另类”的手机在使用rem的实际效果很奇怪,它们内部的计算颇有些令人发指,所以,即使大范围使用了rem作为主要单位,但是很多场景下,'%'这个比例单位还是有使用空间的。

  说完了rem的功过,我们来聊一下替代方案:

  笔者有了解过的方案有两套:

  1、基于vh,vw的方案:

    其实相关的单位总共有4个,vh、vw、vmin、vmax,它们统称为视窗(Viewport,也称作视口)单位,vw、vh分别表示相对于视窗宽度/高度的百分比(如1vw表示视窗宽度的1%),读到这里,聪明的读者应该就能想象,如果能相对于视窗的百分比来设置,不就是能够自适应各种屏幕了么?没错,看上去确实是这样,但是,再一细想还是会有不能覆盖的场景,比如fontSize(其实有没有想过,说不定委员会制定vh、vw、rem等单位,其实初衷是想结合使用?),而且本身也有一些兼容问题,所以实践得并不算太多。

  2、基于meta中设置viewport scale的方案:

  这个方案也是源于移动端那个著名的1像素问题,实现其实很简单,主要是这样:

<!--
服务器端根据前端第一次请求页面时带的客户端信息,判断客户端是几倍屏,然后对应的设置viewport的scale
-->
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

  这样设置了之后,就可以在样式中正常的使用'px'单位,但是在物理上它会表现为对应的实际像素,通过scale来弥补逻辑像素到物理像素的差异,将实际的使用场景拉回了之前的我们熟悉的“正常”场景,然后在需要适配的场景依然沿用之前的rem的方案,因为含有小数点的场景可以通过“真”的px去覆盖,几乎完整的补齐了rem的缺憾。

  第一套方案因为有兼容性的隐形坑,所以实际使用得并不算多,而第二种方案,再结合rem可谓是当今的主流实现了,不过它本身也有一个小缺陷,这种设置相当于前端页面就需要服务端直出了(不过为了SEO,SSR其实也是大前端的时代的一个趋势吧),不能简单的发布静态页面。

  简单的总结一下,其实移动端由于性能上和pc的一些差距和使用环境上的一些区别,在浏览器设计之初就会有一些针对移动端的做一些特殊的实现,本文简单总结了一些笔者最近在调研的一些适配方案,只是移动端这些“特性”的一些方面,而最近开始逐渐普及的android 7还有着更多的“特性”等着我们去适配,前端还是任重而道远。

【css】rem及其替换方案的更多相关文章

  1. Microsoft.AspNet.Web.Optimization.Bundle的完美替换方案

    Web应用程序中包含大量的样式(css)和脚本(js)文件,这些文件的引用.管理和发布有很多解决方案.在Asp.Net MVC应用程序中,大家最熟悉的解决方案应属Microsoft.AspNet.We ...

  2. css - rem和vw

    css - rem和vw 物理像素 物理像素在不同的设备中1px里可以容纳的像素颗粒是不相同的,所以1px这个单位其实也是有N个像素颗粒填充的.同一尺寸屏幕的每个像素点所能容纳的像素颗粒越多显示效果越 ...

  3. Google Earth API 替换方案

    众所周知,GE API将会在15年12月25日结束服务,对于众多采用该API的软件,需要一些替换方案. 例如google map或者cesiumjs http://cesiumjs.org/ 或者尝试 ...

  4. arguments.callee的作用及替换方案

    arguments.callee的作用 arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,返回正被执行的 Function 对象,也就是所指定的 Funct ...

  5. UIActionSheet上加入UIPickerView iOS8替换方案

    此套替换方案採用"UIView+动画"方式实现(将UIActionSheet替换为UIView) 界面层级例如以下: 第一层:view(这一层充满整个屏幕,初始化时颜色为透明.us ...

  6. switch...case...之替换方案一

    很多时候,当switch中有N个分支,且分支数已达10+,每个分支都是一个不小的方法体,那我们是不是应该考虑换一种方式来实现这个分支. 而我目前所能想到的是会用到如下几种方法. 1.Action 2. ...

  7. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  8. PostCSS的插件 -- 关于vue rem适配布局方案

    PostCSS的插件 作用:用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推 ...

  9. css透明背景兼容方案

    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...

随机推荐

  1. 【SDCC讲师专访】PingCAP联合创始人兼CEO刘奇:好的产品应开源,不闭门造车-CSDN.NET

    [SDCC讲师专访]PingCAP联合创始人兼CEO刘奇:好的产品应开源,不闭门造车-CSDN.NET 小米的Themis

  2. 基于 HTML5 WebGL 的挖掘机 3D 可视化应用

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

  3. Broadcom的消息机制

    在Broadcom中提供了自己的消息机制,有两种消息形式:Request/Response and Event(事件) Request/Response消息:进程之间的通信都是通过smd,所有的消息都 ...

  4. 【c++】拷贝控制具体分析

    我们可以定义拷贝操作,使类的行为看起来像一个值或者像一个指针,这取决于如何拷贝指针成员. 当我们拷贝一个像值的对象时,副本和原对象是完全独立的,改变副本不会对原对象有任何影响,反之亦然.标准库容器和s ...

  5. [NPM] npm check to update the dependencies

    To update the dependencies in the project, we can run: npx npm-check -u

  6. Android开发艺术-第二章 IPC 机制

    2.1 Android IPC 简单介绍 IPC 意为进程间通信或者跨进程通信,线程是 CPU 调度的最小单元,是一种有限的系统资源. 进程一般指一个执行单元.不论什么操作系统都须要对应的 IPC 机 ...

  7. 【Mongodb教程 第一课 补加课】 Failed to connect to 127.0.0.1:27017, reason: errno:10061 由于目标计算机积极拒绝,无法连接

    1:启动MongoDB 2014-07-25T11:00:48.634+0800 warning: Failed to connect to 127.0.0.1:27017, reason: errn ...

  8. Windows下的Jupyter Notebook 的介绍(写给新手)(图文详解)

    不多说,直接上干货! Windows下的Python 3.6.1的下载与安装(适合32bits和64bits)(图文详解) Windows下的Jupyter Notebook 安装与自定义启动(图文详 ...

  9. Random产生随机数问题

    昨天在开发时发现这个问题,在同一个for循环内,通过Random多次产生随机数得到的随机数竟是一样的!以前还真没发现这个问题. 以下是简化的代码,如果将random定义在for循环外面则不会有问题(猜 ...

  10. bean的scope属性

    1.singleton  (默认属性)  Spring将Bean放入Spring IOC容器的缓存池中,并将Bean引用返回给调用者,spring IOC继续对这些Bean进行后续的生命管理.Bean ...