webpack的移动端适配方案小结


Posted in Javascript onJuly 25, 2021

在移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度。目前比较常见的适配方案有rem和vw,它们都是css中的相对单位。

rem

W3C对rem的定义是 font-size of the root element,它是一个只相对于浏览器的根元素(HTML元素)的font-size的来确定的单位,也就是说对于不同宽度的机型,我们只需要计算出对应的根元素的字体大小,用同样的css代码可以实现等比适配。考虑最简单的情况:

html代码片段

//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

js代码片段

//根据文档宽度计算根元素的字体大小,以文档宽度的1/10为例,如果屏幕宽度为375,那么根元素font-size就为37.5px
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / 10 + 'px';

css代码片段

//此时如果在css中写
.div{
  width: 2rem;
}
//那么这个div的宽度就是75px,同理如果屏幕宽度为360,那么div就宽72px。
//日常开发中,比较常见的设计稿是750px,在设计稿中一个区域的高度为30px的话,
//在css中写成 height:0.4rem(30/75),就能完成等比缩放

而实际开发中,我们通常在webpack构建的时候使用插件来实现rem适配:postcss-pxtorem 和 lib-flexible。

安装:npm i postcss-pxtorem --D npm i amfe-flexible --S

在webpack.config.js中配置postcss-loader

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,"/dist"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:  ['style-loader','css-loader','postcss-loader']  //配置postcss-loader
            }
        ]
    },  
}

在项目根目录新建.postcssrc.js文件,在其中写入postcss-pxtorem插件配置

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 75,                   //750的设计稿
        propList: ['*']
     }
   }
}

在entry指定的入口js文件("./src/index.js")中引入lib-flexible

import 'amfe-flexible'

这样,就可以在css中直接写设计稿中的绝对像素值,比如一个div#test在750设计稿中的宽度为200px,就可以直接这样写,而不用换算了。

#test{
  width: 200px
}

vw

另外一种方案是使用vw:1% of viewport's width, 它是相对浏览器可视区域宽度的单位。

//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

在移动端,如果配置了width = device-width,那么100vw就是屏幕宽度。

使用vw布局,就不需要再像rem那样,用js中去动态设置根元素的font-size,而是直接相对于屏幕宽度。比如750的设计稿中,一个div的宽度是200px,那么就可以写:width: 200 / 750 * 100 vw

而使用webpack,我们可以用 postcss-px-to-viewport 插件来实现:

安装:npm i postcss-px-to-viewport --D

如上rem那样在webpack.config.js配置 postcss-loader。
在项目根目录新建.postcssrc.js文件,在其中写入 postcss-px-to-viewport 插件配置

module.exports = {
  "plugins": {
    'postcss-px-to-viewport': {
        viewportWidth: 750                 //750的设计稿
     }
   }
}

这样也就可以在css中直接写设计稿中的绝对像素值,示例同上rem的示例。

适配第三方UI框架

有时候我们在移动端会使用其他组件库,引用像vant、mint-ui这样的第三方UI框架,因为第三方框架用的是px单位,基于375px的设计稿,如果我们的项目是750px的设计稿,就不能用同一个viewportWidth进行适配。

此时可以在.postcssrc.js中如下配置(以vw为例,rem也类似):

const path = require('path')
module.exports = ({file}) => {

  //如果使用vant UI框架
  const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  return {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: width,
      }
    }
  }
}

结语

rem和vw都是常用的移动端适配解决方案。两者的区别,首先是在兼容性上,rem可以兼容更老的浏览器版本,参考caniuse网站 caniuse.com/ ;其次是rem需要通过js计算根元素的字体大小,vm是纯css实现。

到此这篇关于webpack的移动端适配方案小结的文章就介绍到这了,更多相关webpack 移动端适配内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery Ajax请求代码(2)
Jan 07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
讲解vue-router之什么是动态路由
May 28 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
Vue3.0 手写放大镜效果
ElementUI实现el-form表单重置功能按钮
vue项目多环境配置(.env)的实现
Node与Python 双向通信的实现代码
Jul 16 #Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 #Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 #Javascript
html5 录制mp3音频支持采样率和比特率设置
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python常用函数与用法示例
2019/07/02 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python树的同构学习笔记
2019/09/14 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
运动会通讯稿400字
2014/01/28 职场文书
经典毕业生求职信
2014/07/12 职场文书
销售活动策划方案
2014/08/26 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python