px：绝对单位，页面按精确像素展示 IE5+

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 IE5+

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

页面基准320px(20px),html font-size值的计算：

[javascript]view plain copy 
    
 var ele=document.getElementsByTagName("html")[0],  
      size=document.body.clientWidth/320*20;  
 ele.style.fontSize=size+"px"  

注：需设置meta缩放比1:1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw： viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh： viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin： vw和vh中较小的那个。
vmax： vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

其它的单位还有：
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大约1/72寸

pc:pica，大约6pt，1/6寸

ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

rem、px、em(手机端h5页面屏幕适配的几种方法)

px

px像素（pixel）：相对长度单位。相对于显示器屏幕分辨率而言。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。那么你在body里字体大小就是1em=8px了。可当你定义了一个div，然后把字体设置成了75%，请问，现在的1em等于多少？这个时候你会发现，原来他继承了body的值，现在字体更小了，变成了6px！因为em是相对于父节点的单位。这么嵌套下去你会哭......(幸好出现了rem╭(′▽`)╭(′▽`)╯)

rem

相对长度单位，指相对于根元素的字体大小的单位。rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视。

屏幕适配的几种方法（流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem）

流式布局：

在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

固定宽度：

把页面设置成320的宽度，超出部分留白，这样做视觉，前端设计都挺挺开心，UI再也不用被流式布局限制自己的设计灵感了，前端也不用流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小

。

响应式：

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性

难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样

反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

通过viewport进行缩放：

以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

rem等比例适配所有屏幕：

var designWidth=640;//设计图尺寸

var deviceWidth = document.documentElement.clientWidth;//屏幕

if(deviceWidth > designWidth) deviceWidth = designWidth;

document.documentElement.style.fontSize = deviceWidth / designWidth * 100 + 'px';

//设置之后即设计图上的60px=0.6rem

参考资料：

http://dev.w3.org/csswg/css-values/#font-relative-lengths

http://isux.tencent.com/web-app-rem.html

转载于：

https://blog.csdn.net/jyy_12/article/details/42557241

https://blog.csdn.net/github_36758028/article/details/53485009

rem、px、em(手机端h5页面屏幕适配的几种方法)

rem、px、em(手机端h5页面屏幕适配的几种方法)

px

猜你喜欢