px转rem的填坑之路
这是要为一个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的填坑之路的更多相关文章
- Android Studio 3.0正式版填坑之路
原文:https://www.jianshu.com/p/9b25087a5d7d Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...
- 微信公众号支付备忘及填坑之路-java
一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么 ...
- 基于环信SDK的IM即时通讯填坑之路(vue)
公司最近使用第三方环信SDK的进行通信聊天,基本已完成.记录下填坑之路 1.可以通过以下方式引用 WebSDK 1.安装 npm install easemob-websdk --save 2. 先 ...
- Mybatis-Plus的填坑之路 - Lynwood/wunian7yulian
目录 Mybatis-Plus 我来填坑~ 目录 一.简单介绍 官方说明 : 成绩: 最新版本: 开发层面MyBatis-Plus特色 Mybatis-Plus中的Plus 二.MP的特性 三.MP框 ...
- mint-ui 填坑之路
swipe组件 因为项目加载eslint的缘故也就没有像之前的项目一样引用swiper框架.这个轮播图的组件文档实在是不敢恭维(尽管其他的文档也好不到哪里去),官方给出的参数真是少的可怜,一些方法也并 ...
- 微信小程序填坑之路其一:wx.request发送与服务端接受
一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...
- 微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)
因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- taro 填坑之路(一)taro 项目回顾
(1)像素写法 PX -- 大写,否则会自动成rem (2)拿取列表第一条数据 let { activity:[firstItem] } = this.state; (3)使用props 需要设置默认 ...
随机推荐
- pandas的学习4-处理丢失数据
import pandas as pd import numpy as np ''' 有时候我们导入或处理数据, 会产生一些空的或者是 NaN 数据,如何删除或者是填补这些 NaN 数据就是我们今天所 ...
- pandas的学习2-选择数据
import pandas as pd import numpy as np dates = pd.date_range('20130101', periods=6) df = pd.DataFram ...
- Github标星26k+!一个神奇的软件!1分钟即可打造了一个科幻风格的终端
Github掘金计划项目分类汇总(原创不易,若有帮助,欢迎分享/点赞): 编程基础 :精选编程基础如学习路线.编程语言相关的开源项目. 计算机基础:精选计算机基础(操作系统.计算机网络.算法.数据结构 ...
- NET 5 Session、Cookie和Cache的使用
1.Cookie public IConfiguration Configuration { get; } // This method gets called by the runtime. Use ...
- vs2012新特性
VS2012的六大技术特点: 1.VS2012和VS2010相比,最大的新特性莫过于对Windows 8Metro开发的支持.Metro天生为云端而生,简洁.数字化.内容优于形式.强调交互的设计已经成 ...
- java连接mysql数据查询数据
package com.cn.peitest.connectDatabase; import java.sql.Connection; import java.sql.DriverManager; i ...
- [leetcode299] 299. Bulls and Cows
public String getHint(String secret, String guess) { /* 判断bull 是通过比较两个字符串的每一位,每次相同就删除该字符出现的次数,因为后边的 ...
- [leetcode712]202. Happy Number判断快乐数字
题目很简单,就是用哈希表存,判断有没有重复 学到了:java中字符串的比较有两种: 1.==这种是比较引用,只用两个字符串变量指向同一个地址才相等 2..equals()这种是值的比较,只要两个字符串 ...
- lock与synchronized 的区别【网上收集】
1. 区别 类别 synchronized Lock 存在层次 Java的关键字,在jvm层面上 是一个接口 锁的释放 1.以获取锁的线程执行完同步代码,释放锁 2.线程执行发生异常,jvm会让线程释 ...
- case when then else end用法
case具有两种格式,简单case函数和case搜索函数 case函数只返回第一个符合条件的值,剩下的case部分将会被自动忽略 1.简单函数 CASE sex WHEN '1 ...