移动端H5网页适配:
在开始阅读这篇文章之前，请大家先思考一个问题，移动端为什么要进行适配？不适配会怎么样？
以下是我的项目经验总结：设计同事给的设计稿中使用的css单位一般是px，使用px单位设置页面的大小时，分辨率越大，显示的元素越小。
如下图1所示，页面元素使用的单位是px，未进行适配：iPhone5、iPhone6及iPhone6 Plus的显示效果：iphone5元素较大，iphone6 plus元素较小。如：iPhone5中间显示的文字换行了，但iPhone6及iPhone6 Plus未换行。
控制台看到的css单位为px:
适配的方法有很多种，本节介绍之前开发项目使用的适配方法：使用post-loader 加 postcss-pxtorem第三方依赖进行px转换为rem以达到适配目的。
用rem适配之后的效果如下图2所示,不同分辨率的设备显示的相对图片大小相似。
控制台看到的css单位为rem:
相关术语解析：
rem ：是一个相对单位，以html元素的font-size大小为基准，可计算子元素的相对大小。通过这个特性，设置不同设备下html 元素font-size的大小，并以该基准缩放元素就能达到适配目的；
通过简单的例子了解rem：
<style>
/*（浏览器默认字体大小是16px)；*/
.father{
/*相对于html元素font-size 的2倍，即 2rem = 2*20 = 40px*/
font-size: 2rem;
}
.son{
/*相对于html font-size 的4倍 ，即 4rem = 20*4 = 80px*/
font-size: 4rem;
}
</style>
</style>
<body>
<div class="father">我是父元素--默认字体大小
<div class="son">子元素的大小</div>
</div>
</body>
与rem名称类似的em单位，则是相对于父元素文字的大小的缩放；
例：
<style>
div{
/* 浏览器font-size 默认值16px,2em表示默认值的两倍即 2em => 16*2=32px */
font-size: 2em;
}
span{
/* 相对于父元素 2em 的4倍 ，即 4em => 32*4 = 128px */
font-size: 4em;
}
</style>
<body>
<div>我是父元素--默认字体大小
<span>子元素的大小</span>
</div>
</body>
设计稿中常用的标准像素单位px, 简单的讲是类似于绝对单位的相对单位，调试发现，宽为 375 的手机屏幕，设置width : 375px；就能布满宽度。
一个页面的px转换为rem的计算量小，可以通过手动计算，多页面应用怎么做到一键适配呢？
答：可以使用：post-loader 加 postcss-pxtorem 对css文件进行转换。
以下是转换依赖包的官方文档地址：
post-loader
postcss-pxtorem
Vue项目中webpack配置步骤：
- 安装post-loader和postcss-pxtorem依赖;
- 在webpack.common.config.js 的module下的rules中添加配置：
//引入postcss-pxtorem
const pxtorem = require("postcss-pxtorem")
......
//module的配置
{
test: /\.(scss|css)$/,
loaders: [
'style-loader',
'css-loader',
//**************************适配配置开始
{
loader: 'postcss-loader', //放在这'style-loader','css-loader'后面，sass-loader前面
options: {
ident: 'postcss', //当引入外部的依赖包作为组件配置项时需要定义一个唯一的标识符，推荐这样写
plugins: [
pxtorem({
rootValue: 16, //表示根元素html的fontSize值,也可以是100,获取任意其他值
propList: ['*'], //设置px转换成rem的属性值，*表示所有属性的px转换为rem
}),
],
},
},
//**************************适配部分结束
'sass-loader',
],
},
- 根据屏幕的大小计算合理的html 元素font-size 值,这里新增一个rem.js文件，写入以下函数，函数自执行，rem.js放入static中，在main.js中引入，函数的作用是设置不同分辨率屏幕下html 的font-size大小。
(function () {
var initFontSize = 16
var iPhone6Width = 375
var clientWidth = window.document.documentElement.clientWidth || iPhone6Width
var newFontSize = initFontSize * (clientWidth / iPhone6Width)
document.documentElement.style.fontSize = newFontSize + 'px'
})()
- 完成以上步骤后，启动项目，即可获得以上图2的适配效果。
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
