摘要：前言这周工作碰到了移动端的问题。这些其实就是比较常见的移动端适配问题。现阶段比较主流的适配方案有二种。淘宝有一个名叫的库，而这个库就是用来解决页面终端适配的。
前言：这周工作碰到了移动端1px的问题。以前一直写样式也没有特别注意着一点。还有就是rem的原理。这些其实就是比较常见的移动端适配问题。现阶段比较主流的适配方案有二种。一种是flexible + rem,另一种是vw
下面我们来看一下具体情况
1、基本概念在了解具体方案原理前，我们先来看一下一些基本概念：
1.1、物理像素(physical pixel)物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
1.2、设备独立像素(density-independent pixel)设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。（老早在没有 retina 屏之前，设备独立像素与物理像素是相等的）
1.3、CSS像素CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。
1.4、设备像素比(device pixel ratio)设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：
设备像素比 ＝ 物理像素 / 设备独立像素
在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)
因此在iphone 6、7、8 的 dpr 为 2的设备中，一个设备独立像素便为 4 个物理像素，因此在 css 上设置的 1px 在其屏幕上占据的是 2个物理像素，0.5px 对应的才是其所能展示的最小单位。
简单的理解，rem就是相对于根元素的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据的ont-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
2、flexible实现方案了解了前面一些相关概念之后，接下来我们来看实际解决方案。淘宝有一个名叫lib-flexible的库，而这个库就是用来解决H5页面终端适配的。
我们把屏幕分成10等分，那么
物理像素为 750 = 375 * 2，那么 10rem = 750px，1rem = 75px;
物理像素为 1125 = 375 * 3，那么 10rem = 1125px，1rem = 112.5px ;
物理像素为 1242 = 414 * 3, 那么 10rem = 1242px，1rem = 124.2px;
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem;
}
2.1、1px的物理像素的解决方案
由此我们得到一个1px像素的解决方案。viewport 的 initial-scale 具有缩放页面的效果。对于 dpr=2 的屏幕，1px压缩一半便可与1px的设备像素比匹配，这就可以通过将缩放比 initial-scale 设置为 0.5=1/2 而实现。以此类推 dpr=3的屏幕可以将 initial-scale设置为 0.33=1/3 来实现。
if (!metaEl) {
metaEl = doc.createElement("meta");
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
3、视口单位适配方案
将视口宽度 window.innerWidth 和视口高度 window.innerHeight 等分为 100 份，且将这里的视口理解成 idealviewport 更为贴切，并不会随着 viewport 的不同设置而改变。
1、vw : 1vw 为视口宽度的 1%
2、vh : 1vh 为视口高度的 1%
3、vmin : vw 和 vh 中的较小值
4、vmax : 选取 vw 和 vh 中的较大值
如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，上面讲的 rem 也是对它的模拟。
跟之前一样的痛点，我们仍然需要花费大量不必要的计算时间去把标注图中的px转换为vw，有没有类似于postcss-px2rem的工具呢？很荣幸能再次站在巨人的肩膀上，已经有大神写了了类似的PostCss插件 postcss-px-to-viewport
参看资料
https://www.w3cplus.com/mobil...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/60823.html
摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。 前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章 使用Flexible实现手淘H5页面的终端适配和再...
摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。 前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章 使用Flexible实现手淘H5页面的终端适配和再...
摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...
摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...
阅读 2017·2021-11-24 09:38
阅读 3577·2021-11-23 09:51
阅读 1342·2021-11-22 14:44
阅读 838·2021-09-14 17:57
阅读 1011·2021-07-29 13:48
阅读 2480·2019-08-29 13:20
阅读 1007·2019-08-29 11:08
阅读 1851·2019-08-26 10:58
