这是要为一个vue项目做自适应,设计稿是1920*1080的,要适应各种手机、ipad、3840*2160的超大屏,所以就选择了rem,包用的是 postcss-pxtorem

在适配的时候遇到了很多问题,初版是这样的:

// 设计稿以1920px为宽度
function setRem() {
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight; let baseSize = 192;
let scale = htmlWidth / 1920;
document.documentElement.style.fontSize = (baseSize * scale) + 'px';
} setRem(); window.addEventListener('resize', () => {
setRem();
});

.postcssrc.js文件是这样配置的:

module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 192,
"propList": ["*"],
"selectorBlackList": ["weui-"]
}
}
}
rootValue的值就是设计稿的宽度/10。
我以为大功告成了,各种想不到的问题就出现了:
1.页面一打开就出现高度滚动条,复现条件:pc端
这个原因是因为rem布局是以宽度为基准的,比如我电脑的屏幕是1920*1080的,但是往往浏览页面的时候,浏览器给的宽度都是给够的,但是高度不够,比如浏览器的头部、电脑任务栏,这些都会抢占页面的高度。而rem计算又是以宽度为基准的,滚动条就出现了:
解决办法:计算设计稿跟实际的宽高比
  const designRatio = 1920 / 1080;
const realRatio = htmlWidth / htmlHeight;
// 存在宽度够了,高度不够的情况
if (realRatio > designRatio) {
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) * (designRatio / realRatio) + 'px'
}

好了,现在 在各种iPhone7、8,以及pc端都没问题,结果又出问题了:

在部分安卓手机会出现样式错乱:

原因:用户设置了系统字体大小

这一部分可以参考这个博客解决: rem在webview中错乱

整体代码:

/**
* 以1920设计稿为准
*/
function setRem() {
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight;
const designRatio = 1920 / 1080;
const realRatio = htmlWidth / htmlHeight; let baseSize = 192;
let scale = htmlWidth / 1920;
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'; // 防止用户设置系统字体大小
let computedFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
let configFontSize = parseFloat(document.documentElement.style.fontSize);
document.documentElement.style.fontSize = (configFontSize * configFontSize / computedFontSize) + 'px'; // 存在宽度够了,高度不够的情况
if (realRatio > designRatio) {
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) * (designRatio / realRatio) + 'px'
}
} setRem(); window.addEventListener('resize', () => {
setRem();
});


rem布局在webview中页面错乱

px转rem的填坑之路的更多相关文章

  1. Android Studio 3.0正式版填坑之路

    原文:https://www.jianshu.com/p/9b25087a5d7d   Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...

  2. 微信公众号支付备忘及填坑之路-java

    一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么 ...

  3. 基于环信SDK的IM即时通讯填坑之路(vue)

    公司最近使用第三方环信SDK的进行通信聊天,基本已完成.记录下填坑之路 1.可以通过以下方式引用 WebSDK 1.安装 npm install easemob-websdk --save 2. 先 ...

  4. Mybatis-Plus的填坑之路 - Lynwood/wunian7yulian

    目录 Mybatis-Plus 我来填坑~ 目录 一.简单介绍 官方说明 : 成绩: 最新版本: 开发层面MyBatis-Plus特色 Mybatis-Plus中的Plus 二.MP的特性 三.MP框 ...

  5. mint-ui 填坑之路

    swipe组件 因为项目加载eslint的缘故也就没有像之前的项目一样引用swiper框架.这个轮播图的组件文档实在是不敢恭维(尽管其他的文档也好不到哪里去),官方给出的参数真是少的可怜,一些方法也并 ...

  6. 微信小程序填坑之路其一:wx.request发送与服务端接受

    一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...

  7. 微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)

    因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...

  8. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

  9. taro 填坑之路(一)taro 项目回顾

    (1)像素写法 PX -- 大写,否则会自动成rem (2)拿取列表第一条数据 let { activity:[firstItem] } = this.state; (3)使用props 需要设置默认 ...

随机推荐

  1. Linux下双网卡绑定bond配置实例详解

    本文源自:http://blog.itpub.net/31015730/viewspace-2150185/ 一.什么是bond? 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡冗余,带宽 ...

  2. Java中中文排序器

    在Java中使用Collator类按照汉字拼音排序字符串 public static void main(String[] args) throws Exception{ String[] strs ...

  3. 为什么 HashMap 的容量大小要设置为2的N次方?

    原文链接:https://www.changxuan.top/?p=1208 前两天,我在一位同学提交中看到了下面这样的一行代码,让我很是惊讶. Map<String, String> t ...

  4. python按位操作以及进制转换

    a = raw_input() b = raw_input() c1 = int(str(a), 2)#2进制转化为10进制 c2 = int(str(b), 2) c = c1 ^ c2#按位异或 ...

  5. 你真的理解了java单例模式吗?讲别人都忽略的细节!

    前言:老刘这篇文章敢做保证,java的单例模式讲的比大多数的技术博客都要好,讲述别人技术博客都没有的细节!!! 1 java单例模式 直接讲实现单例模式的两种方法:懒汉式和饿汉式,单例模式的概念自己上 ...

  6. 根据数据库反向生成PD

    原博文 http://www.360doc.com/content/14/0820/20/12385684_403420399.shtml 步骤 File___Reverse Engineer___D ...

  7. easyui获取table列表中所有数据组装成json格式发送到后台

    jsp代码 var rows =$('#findAllRolestable').datagrid('getSelections'); var result = JSON.stringify(rows) ...

  8. java中对list集合中的数据按照某一个属性进行分组

    import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import java.util.Ite ...

  9. Java获取X509证书里的指纹(SHA-1)从pxf文件里面

    直接通过流去获取pxf后缀文件的内容,指纹通过X509才能获取.String keyStorefile = "pfx文件地址";String strPassword = " ...

  10. input输入框输入中文时,监听的input事件 屏蔽拼音状态

    $(function () { $('#jh').off().on({ //中文输入开始 compositionstart: function () { cpLock = false; }, //中文 ...