移动端适配通常会遇到设备分辨率不同、屏幕尺寸不同等问题，为了解决这些问题，比较常见的方法是将所有的长度单位都使用相对单位rem，但是手动计算rem值比较繁琐，此时可以使用自动将px转换成rem的方法。以下是具体的实现步骤：
1. 添加viewport meta标签
在<head>标签中添加viewport meta标签，这个标签会告诉浏览器如何设置页面的初始缩放比例，例如：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
这个设置将会使页面的初始缩放比例为1，也就是不缩放。
2. 设置根元素字体大小
将根元素的字体大小设置为相对于视口的百分比值，例如：
html {
font-size: 16px;
}
这个设置将会使根元素的字体大小为16px，因为1rem等于根元素字体大小的值。
3. 使用插件自动将px转换成rem
可以使用一些插件，例如postcss-pxtorem、amfe-flexible等，自动将样式中的px单位转换成rem，例如：
div {
width: 100px;
height: 50px;
font-size: 20px;
}
通过插件自动转换之后，变成：
div {
width: 6.25rem; /* 100 / 16 = 6.25 */
height: 3.125rem; /* 50 / 16 = 3.125 */
font-size: 1.25rem; /* 20 / 16 = 1.25 */
}
示例1
假如设计图宽度为750px，我们可以设置如下：
html {
font-size: 46.875px; /* 750 / 16 = 46.875 */
}
/* 使用postcss-pxtorem自动转换px为rem */
div {
width: 100px;
height: 50px;
font-size: 20px;
}
经过自动转换之后：
div {
width: 2.1333rem; /* 100 / 46.875 ≈ 2.1333 */
height: 1.0667rem; /* 50 / 46.875 ≈ 1.0667 */
font-size: 0.4267rem; /* 20 / 46.875 ≈ 0.4267 */
}
示例2
假如设计图宽度为640px，我们可以设置如下：
html {
font-size: 40px; /* 640 / 16 = 40 */
}
/* 使用amfe-flexible自动转换px为rem */
div {
width: 100px;
height: 50px;
font-size: 20px;
}
经过自动转换之后：
div {
width: 2.5rem; /* 100 / 40 = 2.5 */
height: 1.25rem; /* 50 / 40 = 1.25 */
font-size: 0.625rem; /* 20 / 40 = 0.625 */
}
以上是“移动端适配 使px自动转换rem”的完整攻略，通过这个方法可以解决大部分移动端适配问题。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：移动端适配 使px自动转换rem - Python技术站
微信扫一扫 
支付宝扫一扫 