最佳移动端h5自适应rem适配方案
一、利用lib-flexible、postcss-plugin-px2rem插件 进行移动端rem适配。
1、第一
引入lib-flexible .
安装lib-flexible: npm i lib-flexible --save-dev
在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible',
在index.html中 是否 去掉meta name="viewport" 标签 要看框架具体情况,具体请看第四条,
2、第二
使用postcss-plugin-px2rem自动将css中的px转换成rem(真的是大大提升了我们的工作效率,棒棒的,不用自己去瞎算啊)
安装postcss-plugin-px2rem : npm install postcss-plugin-px2rem --save-dev
3、第三 配置postcss
在根目录下 找到.postcssrc.js文件配置如下:
- module.exports = {
- "plugins": {
- "postcss-import": {},
- "postcss-url": {},
- // to edit target browsers: use "browserslist" field in package.json
- "autoprefixer": {},
- "postcss-plugin-px2rem": {
- rootValue: 75, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
- // unitPrecision: 5, //允许REM单位增长到的十进制数字。
- //propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
- // propBlackList: [], //黑名单
- exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
- // selectorBlackList: [], //要忽略并保留为px的选择器
- // ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
- // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
- mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
- minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
- }
- }
- }
4、最后,我们需要知道flexible的转换第三方ui库 某些ui库会出现显示太小的问题,具体去官网看下:
网上有许多解决办法,首先我们要知道,根源是因为移动端ui库,本来就是适配了移动端尺寸,而fliexble再去适配一次,能不变小吗?
那么就知道解决办法了,总结大致如下:
1、固定缩放比,即dpr为1,即将index.html里面 写上 <meta name="viewport" content="width=device-width,initial-scale=1.0">视口标签
如果不写 因为 lib-flexble插件会自动计算添加,这个时候就无法固定dpr为1了。将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 75,exclude:/(node_module)/,这个时候 你三方ui库就不会自动转换 rem了,大小就与页面保持一致了
2.不固定缩放比,将 <meta name="viewport" 标签注释掉,将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 37.5,去掉exclude:/(node_module)/,这个时候 你三方ui库转换为rem后大小与页面也会保持一致了
缺点:页面的基准值是以375px的尺寸来写 这样如果ui图是750px,写css时 需将px/2来写,所以不推荐
附上 px2rem常用 操作:
1、给不希望转化rem的组件,设置px的时候,单位后面加上 /* no */即不会转化px --- 一般border也需用这个
2、如该项px不想被转化,在它转化之前就设置rem,利用VScode的px to rem,将写好的px,直接选中option+z转为rem,然后fliexble就在webpack编译的时候不去转化它了。
3、在px后面添加/*px*/
,会根据dpr的不同,生成三套代码。---- 一般字体需用这个
这里推荐 移动端的ui库:vant-ui,与该适配方案完美结合使用;
vant-ui相比其他移动端ui库优势:
1. 60+ 高质量组件,组件丰富
2. 很详细完整的中英文文档
3. 支持现代浏览器以及 Android 4.0+, iOS 7+
4.在gitHub上已获得11.9K的星,用户量持续增多
5.源码由有赞团队 一直持续维护中。
6.相比其他移动端Ui库,组件更丰富齐全,功能传参方式简单易懂,文档齐全,容易上手。
至此,结束。
二、利用lib-flexible、postcss-px2rem插件 进行移动端rem适配。
1、第一
引入lib-flexible .
安装lib-flexible: npm i lib-flexible --save-dev
在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible',
在index.html中去掉meta name="viewport" 标签 因为 lib-flexble插件会自动计算添加meta name="viewport" 视口标签
2、第二
使用postcss-px2rem自动将css中的px转换成rem(真的是大大提升了我们的工作效率,棒棒的,不用自己去瞎算啊)
安装postcss-px2rem : npm install postcss-px2rem --save-dev
3、配置postcss
在build文件夹中找到 utils.js ,配置如下:
- function generateLoaders(loader, loaderOptions) {
- const loaders = options.usePostCSS
- ? [cssLoader, px2remLoader]
- : [cssLoader,px2remLoader ];
- if (loader) {
- loaders.push({
- loader: loader + '-loader',
- options: Object.assign({}, loaderOptions, {
- sourceMap: options.sourceMap
- })
- });
- }
- if (options.extract) {
- return ExtractTextPlugin.extract({
- use: loaders,
- publicPath:'../../',
- fallback: 'style-loader'
- });
- } else {
- return ['style-loader'].concat(loaders);
- }
- }
总结:该方法 在某些移动端UI库下 将ui库也进行转换后 显示的很小 ,解决方法 ,请参考第一种方法;
三、rem适配方法,适合窗口大小可能会改变 以及设计图小于750,或者大于750设计稿的情况
该方法,将100px为1rem,根据设计稿尺寸 缩小100就为 rem,
例如:font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}
/**
* 移动端自适应,移动端一定要在头 <head>标签里面加入这段标签,以适应不同手机的视口
*/
// <!--content-->
// <!--width=device-width 可视区域的宽度,值可为数字或关键词device-width-->
// <!--height=device-height 可视区域的高度,值可为数字或关键词device-height-->
// <!--user-scalable=yes/no 是否可对页面进行缩放,no 禁止缩放-->
// <!--initial-scale=1.0 页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放-->
// <!--minimum-scale=1.0 可视区域的缩小级别-->
// <!--maximum-scale=1.0 可视区域的放大级别-->
最佳移动端h5自适应rem适配方案的更多相关文章
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动端H5地图离线瓦片方案(1)(2)
2在作者另一篇 移动端H5地图离线瓦片方案 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 移动端的网速和 ...
- em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...
- vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
- 移动端H5多终端适配解决方案
推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...
- pc端的弹性布局适配方案
方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果. function adaptor(){ //为了便于计算,这里以19 ...
- 移动端H5地图离线瓦片方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 移动端的网速和流量耗费是移动开发必须考虑的两个点.常规的瓦片展 ...
- 移动端 移动web屏幕适配方案 随不同宽度的屏幕而改变
链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-term ...
随机推荐
- OS X 恢复模式重置 Mac 用户登录密码
关闭你的 Mac.按住 Command + R(⌘R) 组合键,并点按开机按钮,直到出现 标志,进入恢复模式(Recovery Mode)(当然,你也可以先按开机键,在听到启动声后,立即按住 ⌘R ...
- .netcore项目部署到linux的docker里后,速度异常的慢
.netcore项目部署到linux的docker里后,速度异常的慢,部署在iis下速度非常快. 特别是 接口里再调用其他接口,那速度绝对是蜗牛爬行的速度. 经过几个月的折腾,终于知道是什么问题了: ...
- mac环境更新node版本
执行命令: 清除node的cache(清除node的缓存) sudo npm cache clean -f 安装"n"版本管理工具,管理node(没有错,就是n) sudo npm ...
- Visual Assist之Hashtags功能简介
Visual Assist是一款非常好的Visual Studio下开发的插件,网上已经有很多关于它的配置以及相关介绍,本文不再赘述.本文将注重介绍它的Hashtags功能. 本文主要内容来自于官网介 ...
- python自动化接口测试
前几天,同组妹子说想要对接口那些异常值进行测试,能否有自动化测试的方法.仔细想了一下,工具还挺多,大概分析了一下: 1.soapui:可以对接口参数进行异常值参数化,可以加断言,一般我们会加httpc ...
- Flutter入门(一)
Flutter的sdk地址https://flutter.dev/docs/development/tools/sdk/releases 如果网络不能翻墙,只需要在环境变量里增加如下 FLUTTER_ ...
- axios get,post请求时带headers
axios post请求时带headers: axios.post("http://xxx.com/xxx/xxx/xxx?", { 'queslistid': this.kemu ...
- Centos7基础之查看NETMASK,GATWAY,DNS小技巧
引语: 查看IP这种很基础的操作,想必大家都快倒背如流了.就是不知道大家知不知道怎么查看NETMASK,GATWAY,DNS.当然nmtui图形化界面以及查看网络配置文件这种骚操作就直接略过了.之前一 ...
- Centos各版本系统ISO镜像下载地址
https://www.centos.org/download/mirrors/ 需要在里面一个个看,有些是没有旧版本镜像的 补充: 上面这个方法很难再找到旧版本了 更好的方法如下:以下载Centos ...
- Android Studio 开发
Android studio安装与配置 (收藏) https://www.cnblogs.com/gufengchen/p/10991886.html ------------------------ ...