webpack的移动端适配方案小结
在移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度。目前比较常见的适配方案有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 移动端适配内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要为大家详细介绍了H5移动端适配,Flexible方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要为大家详细介绍了vue大屏展示适配,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-25
- 这篇文章主要介绍了vue如何使用rem适配,帮助大家处理vue开发移动应用时的兼容性问题,感兴趣的朋友可以了解下...2021-02-06
- 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种:等高等宽、等宽不等高、等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例。我们用百度图片作为...2015-10-30
- 这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-18
- 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种:等高等宽、等宽不等高、等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例。我们用百度图片作为...2015-10-30
- 这篇文章主要介绍了Vue项目移动端滚动穿透问题的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
Webpack打包css后z-index被重新计算的解决方法
这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。...2017-06-24- 这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应 原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式 最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌...2015-10-23
- 这篇文章主要介绍了详解vue+vueRouter+webpack的简单实例,非常具有实用价值,需要的朋友可以参考下...2017-06-24
- 本文主要介绍了webpack搭建脚手架打包TypeScript代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-21
- 这篇文章主要为大家详细介绍了利用jmSlip编写移动端顶部日历选择组件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
Vant+postcss-pxtorem 实现浏览器适配功能
这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-05- 这篇文章主要介绍了HTML5实现移动端点击翻牌功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
- 微信在前段时间的更新中也实现了暗黑模式,而苹果系统也早就支持暗黑模式,Android也一样可以实现,下面这篇文章主要给大家介绍了关于Android如何快速适配暗黑模式的相关资料,需要的朋友可以参考下...2021-08-11
- 这篇文章主要介绍了关于webview适配H5上传照片或者视频文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 这篇文章主要介绍了vue移动端弹起蒙层滑动禁止底部滑动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-22
- 众所周知在vue移动端h5页面当中,适配是经常会遇到的问题,这篇文章主要给大家介绍了关于vue项目适配大屏端的相关资料,需要的朋友可以参考下...2021-08-03
- 这篇文章主要介绍了Android项目多服务端接口适配(超简单),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-10