使用rem适配不同屏幕的移动设备
发布时间：2021-01-07 15:13:11 所属栏目：系统 来源：网络整理
导读：1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可
|
2.开始进入rem教程1.先设置header里面的meta标签： <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1"> ? 2.在header写上<script>标签 <script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + ‘px‘; </script> ? 问题：为什么要设置Html的font-size？答：这里是设置html标签的font-size，上面概论红色字写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。 问题：为什么是clientWidth/640?为什么要乘以100？答：
例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50*（320/640）=25px；这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=（320/640）。
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,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 ?（编辑：应用网_阳江站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐