通过插件postcss-pxtorem轻松实现px到rem转换,完成移动端适配

移动端H5网页适配:

在开始阅读这篇文章之前,请大家先思考一个问题,移动端为什么要进行适配?不适配会怎么样?


以下是我的项目经验总结:设计同事给的设计稿中使用的css单位一般是px,使用px单位设置页面的大小时,分辨率越大,显示的元素越小。

如下图1所示,页面元素使用的单位是px,未进行适配:iPhone5、iPhone6及iPhone6 Plus的显示效果:iphone5元素较大,iphone6 plus元素较小。举个栗子:iPhone5显示的中间文字换行了,但iPhone6及iPhone6 Plus未换行。

控制台看到的css单位为px:
通过插件postcss-pxtorem轻松实现px到rem转换,完成移动端适配_第1张图片

适配的方法有很多种,本节介绍之前开发项目使用的适配方法:使用post-loaderpostcss-pxtorem第三方依赖进行px转换为rem以达到适配目的。
用rem适配之后的效果如下图2所示,不同分辨率的设备显示的相对图片大小相似。

控制台看到的css单位为rem:
通过插件postcss-pxtorem轻松实现px到rem转换,完成移动端适配_第2张图片

相关术语解析:

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配置步骤:

  1. 安装post-loader和postcss-pxtorem依赖;
  2. 在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',
        ],
      },
  1. 根据屏幕的大小计算合理的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'
})()
  1. 完成以上步骤后,启动项目,即可获得以上图2的适配效果。

你可能感兴趣的:(web前端开发技术,Vue)