了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

　　本人java菜鸟一名，若有错误，还请见谅。

　　1、px和em和rem的定义和区别

　　px：px像素，是相对单位，相对于屏幕的分辨率而言，也就是说，当屏幕的分辨率不同那么px相同，实际看到的大小也会不同。

　　　　例如：当一台手机的分辨率为1024*768来说，也就是说，这屏幕由纵向的1024个像素点和横向的768个像素点组成，所以当一个组件的width为200px的时候在这台手机上会占据200个横向的像素点；那么当同样大小的手机只有800*600的分辨率，那么该组件在同样的大小手机中也占据了200个横向像素点，所以看到的组件大小实际上会比分辨率大的要大。

　　em：是相对长度单位，是相对于当前对象内文本的尺寸，但要注意，em会继承父级元素的字体大小。

　　　　例如：任意浏览器的默认字体高度都是16px，所以未经调整的浏览器都符合16px = 1em。那么假设当根元素的大小为1.2em，子元素也要为1.2em，那么子元素大小应该设为1em，因为em会继承父元素的字体大小，若子元素也设计为1.2em那么实际大小会变为1.44em。

　　　　注意：当浏览器的默认字体高度改变时，em和px的转换比例也随之改变，比如当font-size = 65%的时候，那么实际的转化率为：16px * 65% = 10px = 1em。

　　rem：rem是css3新增的一个相对单位，所有的组件相对于的是html根元素的大小，那么可以做到的是，只修改根元素的大小就可以修改所有元素的大小。

　　　　例如：当根元素的大小为16px的时候，16px = 1rem ，若有组件大小为2.5rem，则其实际的大小为 2.5 * 16 = 40px。若根元素的字体大小改变，所有组件的大小也随之改变。

　　2、使用Flexible实现vue移动端的适配

　　lib-Flexible是一个制作h5的开源库，通过添加这个js文件之后动态的改变mate标签，从而给html标签添加data-dpr和font-size两种属性并动态改写他们的值。而当给font-size添加值之后会以这个值做相应的计算，从而达到屏幕适配的效果。

　　导入lib-Flexible：

　　　　在index.html中添加相应的路径 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

　　　　在main.js中添加相应的引用 import 'lib-flexible/flexible.js';

　　3、使用px2rem 插件方便的将px单位转为rem

　　引入Flexible之后可以使用rem来编写代码，但是对于已经使用了px来编写的程序来说又该怎么办呢。这里我们引入px2rem插件，来自动转换px单位。

　　　　具体步骤：

　　　　　　1、下载插件 npm install px2rem-loader lib-flexible --save

　　　　　　2、在main.js中引入lib-flexible import 'lib-flexible/flexible.js'

　　　　　　3、在build下的 utils.js中，找到generateLoaders 方法，添加以下代码

　　　　　　　　const px2remLoader = {
　　　　　　　　　　loader: 'px2rem-loader',
　　　　　　　　　　options: {
　　　　　　　　　　remUnit: 75,
　　　　　　　　　　}
　　　　　　　　}

　　　　　　　　function generateLoaders (loader, loaderOptions) {
　　　　　　　　　　var loaders = [cssLoader, px2remLoader]
　　　　　　　　　　if (loader) {
　　　　　　　　　　loaders.push({
　　　　　　　　　　loader: loader + '-loader',
　　　　　　　　　　options: Object.assign({}, loaderOptions, {
　　　　　　　　　　sourceMap: options.sourceMap
　　　　　　　　　　})
　　　　　　　　　　})
　　　　　　　　}

　　　　使用方法，通过改变remUnit的值来自动按比例转化为rem。

　　参考文章：　https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

　　　　　　　　https://www.cnblogs.com/leejersey/p/3662612.html

　　　　　　　　https://blog.csdn.net/qq_33485463/article/details/80454326

秒客网

了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

1、px和em和rem的定义和区别

2、使用Flexible实现vue移动端的适配

3、使用px2rem 插件方便的将px单位转为rem

相关文章