移动端适配和跨终端（移动端、PC端）适配

1英寸：2.5c厘米屏幕尺寸：屏幕的对角线长度，比如荣耀20pro，6.26英寸。像素：屏幕的成像点是一个像素，每个像素由红、绿、蓝三基色组成。（在固定的屏幕尺寸下，一个像素的物理尺寸与分辨率成反比。）分辨率：指屏幕垂直和水平方向的像素个数，单位为px--pixel。（320*480分辨率就是横向320像素，纵向480像素。）从最初的颗粒屏，到720p再到1080p，乃至现在各个旗舰手机的2k屏，我们的物理分辨率都在变大。这就暴露了一个问题。如果我们将手机的分辨率提高一倍，我们的图像就会翻倍。是不是每个设备都要出一个设计稿，每个设备的分辨率都不一样。其实你担心的问题，我们乔领导很多年前就想到了。这是我们合乎逻辑的决定。乔布斯在iPhone4发布会上首次提出了RetinaDisplay（视网膜屏幕）的概念。iPhone4使用的retina屏幕，将2x2像素当成1像素使用，让画面看起来更加细腻，但是元素的尺寸却非常小。不会改变。从那以后，高分辨率设备增加了一个逻辑像素。虽然这些设备在逻辑像素上的差异并没有太大的跨度，但还是有那么一点点区别，于是就诞生了移动端页面适配的问题。由于逻辑像素源自物理像素，因此它们将具有像素比。dpr，全称devicePixelRatio，翻译成中文为设备像素比，用来描述设备在单个方向上的物理像素数/逻辑像素数的比值。值越高，屏幕越密。人们常说双屏、三屏，这里的倍数指的是dpr。设备像素比简称dpr，即设备的物理像素与独立像素的比值。为什么需要知道设备像素比？因为这个像素比例会产生一个很经典的问题，1像素边框的问题。1px边框问题我们在css中写1px的时候，因为是逻辑像素，所以我们的逻辑像素是根据设备像素比（dpr）映射到设备上的，也就是2px或者3px，由于各个设备的屏幕大小不同导致每个物理像素渲染出来的尺寸不一样（记住上面的知识点，设备的像素尺寸是不固定的），所以如果在更大尺寸的设备上，1px渲染一样这是经典的单像素边框问题.至于单像素边框问题的其他解决方法，网上有一堆答案。这里我推荐一个非常简单易用的解决方案，没有副作用transform:scale(0.5)solutiondiv{height:1px;背景：#000；-webkit-transform:scaleY(0.5);-webkit-transform-origin:00;overflow:hidden;}viewport(window):看到逻辑画布的窗口。在网络浏览器窗口中，指文档的可见区域。那么如何在移动端配置viewport呢？一个简单的元标记就足够了！视口和多屏适配：目前在标准已经实现的API中，有两个DOM属性可以用来获取viewport的大小。以宽度为例：document.documentElement.clientWidth（无滚动条）window.innerWidth（有滚动条）注意：在手机浏览器中，手动缩放页面时，document.documentElement.clientWidth不会有任何变化。window.innerWidth在iOS中会等倍缩小，Android在不同浏览器中表现差异较大。如果需要获取初始视口宽度，推荐使用document.documentElement.clientWidth。屏幕设备窄的问题在移动互联网早期，屏幕设备的物理像素宽度多为320、480、640等。而互联网世界中绝大多数站点都是为PC设计的，其文档宽度一般都在800px以上。如果浏览器和为PC制作的网页不做任何处理，那么在窄屏设备上加载网页，我们看到的效果是默认显示网页的左上角，然后通过横屏和横屏浏览垂直滚动网页的其他部分。Flex布局：根据跨屏适配的需要，根据业务类型一般有两种UI设计方案：●根据屏幕宽度，UI布局可以灵活拉伸或流动。这种方法称为响应式设计（_ResponsiveDesign_）；将屏幕按照宽度范围划分成几个有限的部分，为每个部分定制一个固定的UI，相当于为一个特殊的设备设计一个特殊的UI。这种方法称为自适应设计（_AdaptiveDesign_）。反应灵敏。屏幕适配没有粒度区分。当宽度在同一设备上发生变化时，内容布局会无缝平滑地变化。技术实现通常是一套代码适配所有屏幕。自适应的。屏幕适配有粒度区分。原则上不做过渡UI设计。当宽度在同一台设备上发生变化时，内容布局会逐步变化。技术实现通常是多屏对应多组代码。注意：前端概念很多，看懂就行，响应式设计方案不需要深究。常见于PC、手机等多个终端共用一套代码的场景。自适应设计是为了在特定设备上实现最佳用户体验。越来越多的产品开始针对特定屏幕设计固定的UI。大多数移动产品都有一个不同于PC的专用m站。.其技术实现通常是：服务器根据浏览器请求的user-agent判断设备类型，然后返回（或重定向）相应的站点内容。移动端适配：只考虑不同手机屏幕尺寸在移动端的适配。1.REM+媒体查询2.flexible.js3.vw,vh?跨端适配：移动端--》PC端适配：REM比例缩放？两边空白居中？PC端--》移动端适配：移动端设置viewport=980？