解读

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-问题规整相关推荐

vue项目中使用rem替换px-使用方法-01
移动端页面适配,rem和vw适配方案基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿(一般UI设计师给的都是 ...
vue项目中 img标签加载失败方法，onerror事件的两种方法
vue项目中 img标签加载失败方法 ?css 第一种方法第二种方法本人写的第一篇文章,希望对你有帮助第一种方法 < img src="123" :οnerrοr=&q ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
vue项目中 npm使用淘宝镜像方法记录cnpm
vue项目中 npm使用淘宝镜像方法记录 cnpm安装 1,设置默认镜像地址 npm config set registry https://registry.npm.taobao.org 2,验证镜 ...
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
vue项目中的一些报错解决方法
1.mixed spaces and tabs no-mixed-spaces-and-tabs 禁止使用空格和tab混合缩进:大多数代码约定要求使用空格或 tab 进行缩进.因此,一行代码同时混有 ...
VUE项目中CSS设置动态宽度的方法
网上找到三种方法: 一.使用cumputed 首先你务必看Vue的官方文档.涉及到的基础知识有: 绑定内联样式的使用 computed的使用文档写的都是基础使用.那么在项目实战中如何使用,两步就能实 ...
vue项目中使用postcss-px2rem的方法总结
vue项目中使用postcss-px2rem的2种方法在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方 ...
vue项目中 img标签加载失败(404)方法，@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

vue项目中使用rem替换px-使用方法-02-问题规整

解读

高清方案的源码

vue项目中使用rem替换px-使用方法-02-问题规整相关推荐

最新文章

热门文章