一步步教你使用rem适配不一样屏幕的移动设备

时间 2019-11-25

标签步步使用 rem 适配不一样屏幕移动设备繁體版

原文原文链接

1.先说说几个前端经常使用的几个单位的概论：

一、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，若是px要换算成物理长度，须要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时通常都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
二、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法相似百分比，如：0.8em, 1.2em,2em等。一般1em=16px。
三、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
四、rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引发了普遍关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

2.开始进入rem教程

1.先设置header里面的meta标签：javascript

1 <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

2.在header写上<script>标签html

1 <script type="text/javascript">
2 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
3 </script>

问题：为何要设置Html的font-size？前端

答：这里是设置html标签的font-size，上面概论红色字写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。java

问题：为何是clientWidth/640?为何要乘以100？浏览器

答：iphone

1.是由于这里是做为一个基础数值，换个方向去想，这里先不乘以100以避免产生误解。字体

例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px,那么咱们在页面上应该设置宽度为 width:50rem，至关于宽度是：50*（320/640）=25px；这里能正确算出在320px的设备上恰好占一半,其实能够想象为 rem=（320/640）。spa

2.通常浏览器的最小字体是12px，若是html的font-size=（320/640）px，至关于font-size=0.5px，那么这个数值就小于12px，会形成一些计算的错误，和一些奇怪的问题，*100后，font-size是50px，就能够解决这种字体小于12px的问题。设计

3. 为了计算方便咱们后面把比率乘以了100，（320/640）*100，那么相对应这个元素在设置数值的时候就须要除以100了（50/100）,这样能够保证最后出来的数值不变.code

3.设置好html的font-size,那么咱们下面就能够开始编写根据设计稿的例子了。

设计稿是640px，有一个红色盒子宽高都是320px，里面的文字是32px，那么下面是这个例子的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
    </script>
</head>
<body style="margin: 0 ;padding: 0;font-size: 0.32rem">
<div style="width: 3.2rem;height: 3.2rem ;background: red">
    <span>danny.xie</span>
</div>
</body>
</html>

1.在iphone5下的状况，设备的物理像素是320px

1.在iphone6下的状况，设备的物理像素是375px

能够看到字体的大小和红色盒子的宽高跟设计稿上面的比例是保持一致的，这样就是rem适配不一样设备的的基本用法，如上文有错误，欢迎指出和讨论，十分感谢。