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 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 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/10/09 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
Jquery中CSS选择器用法分析
2015/02/10 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python字符遍历的艺术
2008/09/06 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python for循环中的陷阱详解
2018/07/13 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
社区学习十八大感想
2014/01/22 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
会议主持词
2014/03/17 职场文书
寄语是什么意思
2014/04/10 职场文书
给学校的建议书范文
2014/05/15 职场文书
公司承诺书格式
2014/05/21 职场文书
2015年教师新年寄语
2014/12/08 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
python微信智能AI机器人实现多种支付方式
2022/04/12 Python