移动端自适应布局

背景

web开发和移动端开发的区别： web开发是指你的js、css、html代码运行在pc电脑端的浏览器中，例如chorme等，而移动端开发则是你的代码js、css、html运行在手机、平板中的浏览器中，例如webView。因此，pc端开发和移动端开发的区别就在于，你编写的代码是运行在那个终端的浏览器中。
那么，既然代码相同，那么有什么区别呢？\/post/704740… 因为手机端和pc端的浏览器，特性是不一样的，例如：

• 屏幕页面的适配（布局方式）
• 与用户交互方式的不同(pc为点击，移动为触摸)
• 网络环境与设备性能不同
• 兼容性不同

1.屏幕的适配 这里涉及到页面的布局方式，目前常用的布局方式有如下几种：/post/704767…

• 固定宽度布局( PC端常用)
• 流体布局(百分比布局% )
• rem和vw布局
• 响应式布局
• Flex弹性布局(工具)
• Grid网格布局(工具)

物理像素和设备独立像素的区别 设备独立像素是操作系统内部定义的一种像素单位，应用程序将设备独立像素告知操作系统，然后由操作系统将设备独立像素转化为对应的物理像素。也就是说，应用程序不能直接操作物理像素，而是需要告知操作系统设备独立像素，然后操作系统作为中介将设备独立像素转为物理像素。那么，为什么应用程序不能直接操作物理像素，而要通过操作系统中的设备独立像素作为中介来转化为物理像素呢？www.jianshu.com/p/6b1f94bfa… 因为现在显示屏幕的液晶单位面积变小了，比如：显示一个5厘米高度的div，有的屏幕需要10个无力像素，有的屏幕需要五个无力像素，这就导致了不同的显示屏幕，开发人员要设置不同的高度。所以设置了设备独立像素，一个设备独立像素中包含了1个或多个物理像素，包含的越多，屏幕越清晰。

至于为什么出现设备独立像素这种虚拟像素单位概念，下面举个例子：

iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但 iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960

这意味着，iPhone 3GS 有 320 个物理像素，iPhone 4/4s 有 640 个物理像素

如果我们放在代码中的都是物理像素的设置，即按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白（这就导致了同样的代码320px，放在iPhone 3GS是铺满，但是到了iphone4中就是一半），为了避免这种问题，就产生了虚拟像素单位。 我们统一 iPhone 3GS 和 iPhone 4/4s 都是 320 个虚拟像素（即设置320px虚拟像素），只是在 iPhone 3GS 上，最终 1 个虚拟像素换算成 1 个物理像素，在 iphone 4s 中，1 个虚拟像素最终换算成 2 个物理像素，这就满足了设置一样的320px，放在各个屏幕都是铺满的。 这里的转化是交给操作系统去自动转化的，操作系统拿到320px，知道这是铺满时候的最大像素，那么就要告诉物理机要显示多少个物理像素（设备像素比 * 设备独立像素值），这里的设备像素比就是dpr=物理像素/设备独立像素。这个转化过程是交给操作系统实行的。

如何获取设备独立像素：
在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。
在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：

物理像素和设备独立像素关系，设备独立像素和css像素关系

window.devicePixelRatio设备像素比，devicePixelRatio = （在相同长度的直线上）物理像素的数量 / CSS像素的数量，一般来说，pc端的dpr在无缩放的情况下，1个css像素 = 1个设备独立像素，而一个设备独立像素等于2个物理像素，所以一个css像素等于2个物理像素。css像素边长/设备独立像素边长就是缩放比例，例如我设置一个div宽度为160px（css像素）此时无缩放，对应160个设备独立像素单位。（操作系统认为320设备独立像素为满屏），此时先不看物理像素，那么我们可以知道这个时候这个div是屏幕的一半宽度。但是如果我们进行放大，放大到div宽度占满屏幕，我们知道这个时候div既然已经占满屏幕，说明设备独立像素一定是满屏时候的大小，即320设备独立像素。但是css像素依然是160px。这就是缩放对dpr的影响。

pc端中的视口和移动端中的视口的区别 1、在一个浏览器中，我们可以看到的区域就是视口（viewport）；
2、 在pc端的页面中，布局视口等于视觉视口；
3、 但是在移动端，布局视口和视觉视口是有区别的：

• 由于移动端的网页窗口比较小，有时候我们需要一个大的网页在移动端可以完整的显示；
• 所以在默认情况下，移动端的布局视口是大于视觉视口的。 在 PC 端，视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。

设备独立像素与物理像素的关系
普通屏幕下1个设备独立像素对应1个物理像素 高清屏幕下1个设备独立像素对应n个物理像素
设备独立像素与css像素关系
标准情况(在不考虑缩放的前提下) 1px的css像素 === 1px的设备独立像素

移动端的视口与 PC 端不同，有三个视口

• 布局视口
• 视觉视口
• 理想视口：布局视口 = 视觉视口； 我们可以知道，默认情况下，移动端的布局视口宽度是980px，而视觉视口的宽度是320px，那么为了将980px完整的放在320px中，就会对原有的网页进行压缩，这就导致网页中的所有元素都会缩小，造成不好的体验。

www.jianshu.com/p/3b8bd24bd…

适配方式
viewport适配
rem适配
vw适配

问题：
为什么pc网页的字体放到移动端会变小：
上文说到移动设备布局视口的默认值是980px，由于视觉视口只有屏幕宽度，比如375px，那么我们看到的页面就会有一定的缩放，这样的效果是不太好的。

移动端适配方案

移动端适配方案的原则就是：将设计稿元素在屏幕中等比例缩放。
重点：等比例

1.rem布局适配

1.1 适配原则：按照设计稿等比例呈现在不同的宽度的屏幕中\

1.2 适配目标：

1.2.1 等比例缩放
开发人员不需要每个元素去计算各个元素的值：（设计稿元素/设计稿宽度）* 屏幕宽度，即 比例*屏幕宽度，例如设计稿为675px，其中一个div为100px，移动端屏幕宽度为750px，那么前端需要代码中设置的元素宽度为：750 * (100/675) = 111.111px。（这个时候我们已经实现了等比例还原了）
1.2.2 开发人员直接使用设计稿中数据值
我们希望通过设计稿中的100px可以直接写出css的宽度。那么已知 设计稿元素/设计稿宽度 = 代码中的值/屏幕宽度，且设计稿宽度与屏幕宽度固定不变，那么： 设计稿元素值/设计稿宽度 = 设计稿元素值*变量 /屏幕宽度，那么设计稿元素值可以约分，那么变量的值就可以求出来为：屏幕宽度/设计稿宽度，设计稿元素值*变量 = 111.111px，且设计稿为100，那么我们就可以导出一个rem单位来担当变量的作用，即1rem = 750/675，所以我们通过设置rem单位，就可以直接在代码写css宽度，100px为100rem，230px为230rem，但是我们希望写在代码中的值变小一点，那么rem对应的font-size就要大一些，即230px为2.3rem，那么1rem就不再是750/675而是（750/675）*100。

问：为什么 屏幕宽度/640 要乘以100？
答：解决浏览器字体小于12px会出现的问题。浏览器fot-size最小px大小问题，一般浏览器的最小字体是12px，如果html的font-size=（320/640）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，*100后，font-size是50px，就可以解决这种字体小于12px的问题

这个就是利用rem实现等比例适配的解决方案：
100px/675px = 100rem/750px = 100·fontsize/750px，那么每个屏幕下对应的font-size可以算出来，这样就用公式来替代程序员每次去计算，而font-size值就是屏幕宽和设计稿的比值

1.3 rem实现方案

• 媒体查询
• js动态计算

const PAGE_WIDTH = 750; // 设计稿的宽度 
let PAGE_FONT_SIZE = 100;// 设计稿1rem的大小

const setView = () => {
  if (document.documentElement.clientWidth > 450) {
    // 大屏下减小根元素字体
    PAGE_FONT_SIZE = 50;
  }
  document.documentElement.style.fontSize = PAGE_FONT_SIZE * (document.documentElement.clientWidth) / PAGE_WIDTH + 'px';
}

• pxToRem插件

总结：
1.移动端适配方案-rem适配的原则
2.原理（两个点：怎么保证等比例，怎么保证设计稿值复用）
3.rem的3种实现方案

移动端1px问题

背景

一般设计稿都是以750px宽度为基准，当设计师给出1px的数据的时候，如果手机屏幕高清，且视觉视口宽度为375px，物理像素为750px的手机(dpr如果为2), 这个时候我们应该只点亮1个物理像素，那么对应的逻辑像素应该是0.5px。但是问题是，移动端我们设置css为0.5px的时候，只支持1px，dpr为2，又会被转为2个物理像素，导致实际显示的比设计稿的要宽1px物理像素。
因此，1px问题本质上就是程序员无法从css代码上实现只点亮一个物理像素1px的问题（对于dpr>2的移动端无法实现）。导致实际边框宽度就会是设计稿而言就会略粗一点。
解决方案：解决物理像素显示1px方法
方法一：伪元素+transform的方式

面试问题：

1.移动端适配方案
2.移动端1px问题
一般设计稿都是以750px宽度为基准，当设计师给出1px的数据的时候，如果手机屏幕高清，且视觉视口宽度为375px，物理像素为750px的手机(dpr如果为2), 这个时候我们应该只点亮1个物理像素，那么对应的逻辑像素应该是0.5px。但是问题是，移动端我们设置css为0.5px的时候，只支持1px，dpr为2，又会被转为2个物理像素，导致实际显示的比设计稿的要宽1px物理像素。
因此，1px问题本质上就是程序员无法从css代码上实现只点亮一个物理像素1px的问题（对于dpr>2的移动端无法实现）。导致实际边框宽度就会是设计稿而言就会略粗一点。
/post/713203…