vue项目中使用rem替换px-使用方法-02-问题规整
Posted JackieDYH
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中使用rem替换px-使用方法-02-问题规整相关的知识,希望对你有一定的参考价值。
解读
1 为啥手机网页效果图宽度是要640或者750的?
老实说当然可以,不过为了规范,640或者750是相对合适的。
拿Iphone 5s 举例,它的css像素宽度是320px,由于它的dpr=2,所以它的物理像素宽度为320 × 2 = 640px,这也就是为什么,你在5s上截了一张图,在电脑上打开,它的原始宽度是640px的原因。
那 iphone 6 的截图宽度呢? 375 × 2 = 750
那 iphone 6 sp 的截图宽度呢? 414 × 3 = 1242
以此类推,你现在能明白效果图为什么一般是 640 ,750 甚至是 1242 的原因了么
2 宽度用rem写的情况下, 在 iphone6 上没问题, 在 iphone5上会有横向滚动条,何解?
假设你的效果图宽度是750,在这个效果图上可能有一个宽度为7rem(高清方案默认 1rem = 100px)的元素。我们知道,高清方案的特点就是几乎完美还原效果图,也就是说,你写了一个宽度为 7rem 的元素,那么在目前主流移动设备上都是7rem。然而,iphone 5 的宽度为640,也就是6.4rem。于是横向滚动条不可避免的出现了。
怎么办呢? 这是我目前推荐的比较安全的方式:如果元素的宽度超过效果图宽度的一半(效果图宽为640或750),果断使用百分比宽度,或者flex布局。就像把等屏宽的图片宽度设为100%一样。
3 不是 1rem = 100px吗,为什么我的代码写了一个宽度为3rem的元素,在电脑端的谷歌浏览器上宽度只有150px?
先说高清方案代码,再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size,
如果dpr=1(如电脑端),则html的font-size为50px,此时 1rem = 50px
如果dpr=2(如iphone 5 和 6),则html的font-size为100px,此时 1rem = 100px
如果dpr=3(如iphone 6 sp),则html的font-size为150px,此时 1rem = 150px
如果dpr为其他值,即便不是整数,如3.4 , 也是一样直接将dpr 乘以 50 。
再来说说效果图,一般来讲,我们的效果图宽度要么是640,要么是750,无论哪一个,它们对应设备的dpr=2,此时,1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多,可以帮你快速换算单位,比如在750宽度下的效果图,某元素宽度为53px,那么css宽度直接设为53/100=0.53rem了。
然而极少情况下,有设计师将效果图宽定为1242px,因为他手里只有一个iphone 6 sp (dpr = 3),设计完效果图刚好可以在他的iphone 6 sp里查看调整。一切完毕之后,他将这个效果图交给你来切图。由于这个效果图对应设备的dpr=3,也就是1rem = 50 × 3 = 150px。所以如果你量取了一个宽度为90px的元素,它的css宽度应该为 90/150=0.6rem。由于咱们的高清方案默认1rem=100px,为了还原效果图,你需要这样换算。当然,一个技巧就是你可以直接修改咱们的高清方案的默认设置。在代码的最后 你会看到 flex(false, 100, 1) ,将其修改成flex(false, 66.66667, 1)就不用那么麻烦的换算了,此时那个90px的直接写成0.9rem就可以了。
4 在此方案下,我如果引用了别的UI库,那些UI库的元素会显得特别小,如何解决?
可以这样去理解问题的原因,如果不用高清方案,别的UI库的元素在移动设备上(假设这个设备是iphone 5好了)显示是正常的,这没有问题,然后我们在这个设备上将该页面截图放到电脑上看,发现宽度是640(问答1解释过了),根据你的像素眼大致测量,你发现这个设备上的某个字体大小应该是12px,而你在电脑上测量应该是24px。
现在我们使用高清方案去还原这个页面,那么字体大小应该写为 0.24rem 才对!所以,如果你引用了其他的UI库,为了兼容高清方案,你需要对该UI库里凡是应用px的地方做相应处理,即: a px => a*0.02 rem
(具体处理方式因人而异,有模块化开发经验的同学可使用类似的 px2rem 的插件去转化,也可以完全手动处理)比如,你引入了百度地图(N个样式需要处理转换);或者你引入了一个
framework;又或者你使用了 video 标签,上面默认的尺寸样式很难处理。等等这些棘手问题
面对这些情况,此时我们的高清方案如果不再压缩页面,那么以上问题将迎刃而解。
基于这样的思路,笔者对高清方案的源码做了如下修改,即添加一个叫做 normal 的参数,由它来控制页面是否压缩。
在文章顶部代码的最后,你会看到 flex(false, 100, 1),默认情况下页面是开启压缩的。
如果你需要禁止压缩,由于我们的源码执行后,直接将flex函数挂载到全局变量window上了,此时你直接在需要禁止压缩的页面执行 window.flex(true) 就可以了,而rem的用法保持不变。
有一点美中不足的是,如果禁止了页面压缩,高清屏的1像素就不能实现了,如果你必须要实现1像素,那么自行谷歌:css 0.5像素,有N多的解决方案,这里不再赘述。
5 有时候字体会不受控制的变大,怎么办?
在X5新内核Blink中,在排版页面的时候,会主动对字体进行放大,会检测页面中的主字体,当某一块字体在我们的判定规则中,认为字号较小,并且是页面中的主要字体,就会采取主动放大的操作。然而这不是我们想要的,可以采取给最大高度解决
*, *:before, *:after { max-height: 100000px }
在一些情况下
textarea
标签内的字体大小即便加上上面的方案,字体也会变大,无法控制。此时你需要给textarea
的display
设为table
或者inline-table
即可恢复正常
6 我在底部导航用的flex感觉更合适一些,请问这样子混着用可以吗?
rem适合写固定尺寸。其余的根据需要换成flex或者百分比
7 用了这个方案如何使用媒体查询呢?
一般来讲,使用了这个方案是没必要用媒体查询了,如果你必须要用,假设你要对 iphone5 (css像素宽度320px,
这里需要取其物理像素,也就是640)宽度下的类名做处理@media screen and (max-width: 640px) { .yourLayout { width:100%; } }
高清方案的源码
'use strict';
/**
* @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;
* @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
* @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
*/
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
const _baseFontSize = baseFontSize || 100;
const _fontscale = fontscale || 1;
const doc = win.document;
const ua = navigator.userAgent;
const matches = ua.match(/android[\\S\\s]+AppleWebkit\\/(\\d{3})/i);
const UCversion = ua.match(/U3\\/((\\d+|\\.){5,})/i);
const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
const isios = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
let dpr = win.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
// 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
dpr = 1;
}
const scale = normal ? 1 : 1 / dpr;
let metaEl = doc.querySelector('meta[name="viewport"]');
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
doc.head.appendChild(metaEl);
}
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
rem布局
! function(e) {
function t(a) {
if (i[a]) return i[a].exports;
var n = i[a] = {
exports: {},
id: a,
loaded: !1
};
return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i = window;
t["default"] = i.flex = function(e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\\S\\s]+AppleWebkit\\/(\\d{3})/i),
l = o.match(/U3\\/((\\d+|\\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1);
var u = 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
}, e.exports = t["default"]
}]);
flex(100, 1);
不推荐使用
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
以上是关于vue项目中使用rem替换px-使用方法-02-问题规整的主要内容,如果未能解决你的问题,请参考以下文章