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

时间:2022-09-25 05:29:05

  本人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>

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html © w3cplus.com
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html © w3cplus.com

    在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