在前端开发中，我们不可避免要面临适配问题。本文将介绍几种适配方式：
一、px和em
1.1 px
1.2 em
二、rem
2.1 rem原理
2.2 rem如何计算的
2.3 rem使用
三、使用插件px2rem转换
3.1 原理和优点
3.2 使用方式
一、px和em
px、em、rem都是计量单位，都能表示尺寸。
1.1 px
px表示的是绝对尺寸，是一个固定大小的单元。像素的计算是针对设备屏幕的，1px就是设备屏幕上的一个点。
由于它是固定大小的单位，一般用它来设计网页，但如果用来在手机/ipad上的话，在不同的屏幕上显示无法做到自适应的效果。
1.2 em
em表示的是相对长度单位，它是通过设置文本字体尺寸来实现自适应，它是相对于当前对象内文本的字体尺寸。通常浏览器默认1em=16px，通过设置font-size大小来修改，如：16px*0.625=10px, 则1em=10px。
但em的值会根据父元素的变化而变化，若是修改了一个父元素的尺寸，其子元素的尺寸都要重新修改。
二、rem
2.1 rem原理
rem是css3新增的一个相对长度单位，解决了em变量依赖父元素尺寸的弊端，而rem只相对于根目录，即html标签。我们只要在html标签上设置font-size大小，文档中的字体大小都会以此为标准，通常使用rem来做自适应布局。
2.2 rem如何计算的
rem是将设备屏幕宽度按比例划分的，将屏幕分为均等的100份，则在<html>中设置font-size值为 1rem = 设备宽度/100，之后的元素尺寸设定我们都应使用rem进行设定。当设备宽度改变时，1rem对应的像素就自动修改了。
常见的设备尺寸：
320px => iphone5/se
360px => 安卓手机
375px => iphone6/7/8 iphoneX
414px => iphone6/7/8 plus
// 设备尺寸为320px时
1rem = 320/100 = 3.2px
// 设备尺寸为360px时
1rem = 360/100 = 3.6px
// 设备尺寸为375px时
1rem = 375/100 = 3.75px
// 设备尺寸为414px时
1rem = 414/100 = 4.14px
2.3 rem使用
2.3.1 使用枚举类型进行自适应
// 自适应
// ------------------------
html{
font-size: 38px;
}
@media only screen and (min-width: 320px) {
html {
font-size: 42.666px !important;
}
}
@media only screen and (min-width: 360px) {
html {
font-size: 48px !important;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 50px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 55.2px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 64px !important;
}
}
@media only screen and (min-width: 560px) {
html {
font-size: 74.666px !important;
}
}
@media only screen and (min-width: 640px) {
html {
font-size: 85.333px !important;
}
}
@media only screen and (min-width: 720px) {
html {
font-size: 96px !important;
}
}
@media only screen and (min-width: 750px) {
html {
font-size: 100px !important;
}
}
@media only screen and (min-width: 800px) {
html {
font-size: 106.666px !important;
}
}
@media only screen and (min-width: 960px) {
html {
font-size: 128px !important;
}
}
2.3.2 使用 rem.js 来计算rem
在项目中加入rem.js，并引入就可以使用
/* rem.js文件内容 */
(function () {
var html = document.documentElement;
function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}
window.addEventListener('resize', onWindowResize);
onWindowResize();
})();
三、使用插件px2rem转换
3.1 原理和优点
使用px2rem插件，可以无需再引入rem项目，插件会自动根据手机型号计算 dpr 的值，同时在html根标签内植入一个相应的font-size的值。
优点如下：
- 保证不同设备下的统一视觉体验。
- 不需要你再手动设置 viewport，根据当前环境计算出最适合的 viewport。
- 支持任意尺寸的设计图，不局限于特定尺寸的设计图。
- 支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
- 提供
px2rem 转换方法，CSS 布局，零成本转换，原始值不丢失。
- 有效解决移动端真实 1 像素问题。
3.2 使用方式
3.2.1 安装
npm i px2rem-loader -D
3.2.2 在配置中加入这个插件
可以在webpack中加入配置
plugins:[
new webpack.LoaderOptionsPlugin({
vue: {
postcss: [require('postcss-px2rem')({'remUnit': 100,'remPrecision':8})]
},
})
]
一般postcss建议单独配置在文件postcss.config.js中
module.exports = {
plugins: [
require('autoprefixer')({ browsers: 'last 2 versions' }),
require('postcss-px2rem')({remUnit: 100, remPrecision:8})
]
}
参考链接：
移动端h5之rem布局／px2rem： https://www.jianshu.com/p/e96ccb603a50
px2rem 移动端自适应方案：https://www.jianshu.com/p/64a6cafb1d5a
