这是要为一个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. 【PY从0到1】第二节 字符串和数字

    #本课程都以代码形式呈现.现在进入Python的基础内容的学习. #由于本课程是从0开始分享,所以Python的基础内容是必不可少的.这也是Python量化的必经之路. #下面进入正题. #一般用'# ...

  2. 第六章 Sleuth--链路追踪

    修整了2天,我们继续接着上篇 第五章 Gateway–服务网关 继续来讲SpringCloud Alibaba全家桶中的 Sleuth 链路追踪 组件 喜欢记得点关注哦 6.1 链路追踪介绍 在大型系 ...

  3. openstack高可用集群15-后端存储技术—GlusterFS(分布式存储)

         

  4. 灯光设置(light)

    clc;clear all;close all; %% 台灯的设置figure('color','k')% 底座fill3([0 1 1 0],[0 0 1 1],[0 0 0 0],'b',... ...

  5. NET 5 使用RabbitMQ以及Kafka区别

    区别 1.应用场景方面RabbitMQ:用于实时的,对可靠性要求较高的消息传递上.kafka:用于处于活跃的流式数据,大数据量的数据处理上.2.架构模型方面producer,broker,consum ...

  6. python3参考秘籍-附PDF下载

    目录 简介 Python的主要数据类型 Python中的String操作 基本操作 String连接 String复制 Math操作 内置函数 函数Function 传递参数 列表 添加元素 从lis ...

  7. 一步步教你:如何用Qemu来模拟ARM系统

    这是道哥的第011篇原创 目录 前言 为什么需要ARM模拟系统 应用程序的开发 系统开发(BSP) Qemu是什么? Qemu的两种模式 Qemu 能做什么?或者说适合做什么? 在 Ubuntu16. ...

  8. springcloud组件gateway断言(Predicate)

    Spring Cloud Gateway是SpringCloud的全新子项目,该项目基于Spring5.x.SpringBoot2.x技术版本进行编写,意在提供简单方便.可扩展的统一API路由管理方式 ...

  9. 阿里面试:问springBoot自动装配我这样回答的,面试官对我竖起了大拇指

    引言 最近有个读者在面试,面试中被问到了这样一个问题"看你项目中用到了springboot,你说下springboot的自动配置是怎么实现的?"这应该是一个springboot里面 ...

  10. Java对象赋值与引用

    当需要创建多个相同类型的对象且有某些字段的值是相同的,如果直接 get,set 的话,属性多的时候代码会很长,于是乎,以下代码产生了( java 基础差没搞清楚赋值与引用) 复制代码 1 User u ...