移动端适配以及跨端（移动端，PC端）适配

1英寸：2.5c厘米
屏幕尺寸：屏幕对角线的长度，如honor 20 pro, 6.26英寸。
像素：屏幕成像点就是像素，每个像素都由红绿蓝三原色构成。（固定屏幕尺寸下，像素的物理尺寸大小和分辨率成反比。）
分辨率：指屏幕纵横方向上的像素点数，单位是px--pixel。（320*480分辨率就是横向320个像素纵向480个像素。）

从最初的颗粒感相当大的屏幕，到720p再到1080p，甚至于现在各家旗舰手机的2k屏幕，我们的物理分辨率在变得原来越大。这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同啊，其实你担忧的问题，我们的乔帮主在很多年前就想到了。这就是我们的逻辑分辨率。

乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。从此以后高分辨率的设备，多了一个逻辑像素。这些设备逻辑像素的差别虽然不会跨度很大，但是仍然有点差别，于是便诞生了移动端页面需要适配这个问题，既然逻辑像素由物理像素得来，那他们就会有一个像素比值。
dpr，全称 devicePixelRatio，中文译为设备像素比，用来描述单一方向上，设备物理像素的点数/逻辑像素的点数的比率。值越高，屏幕密度越大。大家常说的两倍屏、三倍屏，这里面的倍数指的就是 dpr。

设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。为什么要知道设备像素比呢？因为这个像素比会产生一个非常经典的问题，1像素边框的问题。

1px边框问题

当我们css里写的1px的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为2px，或者3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同（记得上面的知识点吗，设备的像素大小是不固定的），这样如果在尺寸比较大的设备上，1px渲染出来的样子相当的粗矿，这就是经典的一像素边框问题

至于其他解决一像素边框问题网上有一堆答案，在这里我推荐一种非常好用，并且没有副作用的解决方案

transform: scale(0.5) 方案

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

视口（视窗): 看逻辑画布的窗口。在Web浏览器窗口中指文档可视区域。
那么在移动端如何配置视口呢？ 简单的一个meta标签即可！

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

Viewport与跨屏适配：

目前已被标准实现的 API 中，有两个 DOM 属性可以用来获取视口的大小。
以宽度为例：
●document.documentElement.clientWidth（不含滚动条）
●window.innerWidth（含滚动条）

注意：
在移动端的浏览器中，对页面手动捏合做放大时，document.documentElement.clientWidth 不会有任何变化。window.innerWidth在 iOS 中会等倍数缩小，在 Android 的不同浏览器中表现差异较大。
如果有需要获取初始视口宽度的需求，建议使用document.documentElement.clientWidth。
窄屏设备的问题

移动互联网的早期，屏幕设备的物理像素点宽度多数在 320、480、640 等。而互联网世界的绝大多数站点又是针对 PC 设计的，其文档宽度普遍在 800px 以上。
如果浏览器和针对 PC 制作的网页都不做任何处理，那么在窄屏设备上加载网页，我们看到的效果便是默认显示网页的左上角部分，然后通过水平和竖直方向的滚动来浏览网页的其他部分。

Flex布局：

跨屏适配的需求，根据业务类型，一般有两种 UI 设计方案：

●根据屏幕宽度，UI 布局弹性伸缩或流动。这种方式被称为响应式设计(_Responsive Design_)；
●把屏幕按宽度范围分为有限的几个区段，为每个区段定制固定的 UI，相当于为专门的设备设计专门的 UI。这种方式被称为自适应设计(_Adaptive Design_)。

响应式。屏幕适配无粒度区分，同一设备上做宽度变化时，内容布局无缝圆滑变化；技术实现通常为，一套代码适配所有屏幕。
自适应。屏幕适配有粒度区分，原则上不做过渡态的 UI 设计，同一设备上做宽度变化时，内容布局卡顿式梯级变化；技术实现通常为，多个屏幕对应多套代码。
注：前端很多概念，意会即可，不必深究
响应式设计方案，常见于 PC、移动等多端共用一套代码的场景。
自适应设计，是为了在特定设备上实现最好的用户体验，越来越多的产品，开始针对特定屏幕设计固定的 UI，绝大多数移动端产品都有了区分于 PC 的专门的m站。其技术实现通常为：服务器根据浏览器请求的 user-agent 判断设备类型，然后返回(或重定向)对应的站点内容。

移动端适配：只考虑移动端不同手机屏幕大小上的适配。
1、REM+媒体查询 2、flexible.js 3、vw, vh ?
跨端适配：
移动端--》PC端的适配： REM等比例缩放?两边空白水平居中？
PC端--》移动端的适配： 移动端设置viewport=980?