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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
js实现日期级联效果
Jan 23 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
AngularJS执行流程详解
Feb 17 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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
第九节--绑定
2006/11/16 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
jQuery.each使用详解
2015/07/07 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python使用KNN算法识别手写数字
2019/04/25 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
web页面录屏实现
2019/02/12 HTML / CSS
交通专业个人自荐信格式
2013/09/23 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
公司文体活动总结
2015/05/07 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers