HTML页面适应移动端

一、什么是1px

概念：

• 设备像素：通常所说的电脑分辨率1920x1280，手机分辨率760x1080都是指的设备像素，这是一个物理单位，它代表了设备能控制显示的最小单位，我们可以把其看作成显示器上一个个的点。
• 设备独立像素：是相对于设备上的应用程序来说的，它是应用程序用以控制显示的单位，最后由应用程序转化为设备像素进行显示。所以设备独立像素与设备像素有一定的转换关系。
• css像素：是相对于浏览器来说的，由浏览器负责转换成设备像素进行显示，所以看做是设备独立像素的一种。前端所说的像素均指css像素。下面我们只讨论css像素与设备像素。

换算关系：
设备像素比 = 设备像素/设备独立像素（在某一方向上，x或y方向）

通常设备像素是已知的，在浏览器中，设备像素比可通过JavaScript 中的window.devicePixelRatio获取，css像素可通过screen.width/height（顾名思义，screen.width/height就是屏幕的css宽高）获取。

pc端的设备像素比通常为1，所以如果我的屏幕分辨率为1600x900px，那么我通过浏览器测试拿到屏幕的css分辨率也是1600x900px，移动端的设备像素比通常不等于1：iphone7为2，它的css像素为375x667px，设备像素为760x1334px；iphone7plus为3，它的css像素为414x736px，但是其设备像素不为2208 x 1242px，而是1920 x 1080px，为什么呢？

因为iphone7plus比较特殊，它的物理像素点不能通过414x3=1242px算出来（这是一般情况），ihpone7plus确确实实只有1080个物理像素点，但是iphone7plus先把图像渲染成2208x1242px，然后再缩放到1920x1080px进行显示。

二、viewport

移动设备上的viewport就是其屏幕上能用来显示我们的网页的那一块区域。
viewport有多大呢？

在默认情况下，viewport比移动设备上浏览器可视区域要大，这是因为通常pc端的页面尺寸宽度在1000px左右，而多数移动设备上的屏幕宽通常为400px左右（注意这里开始以后所说的都是css像素），所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，大多数移动设备上的浏览器都会把自己默认的viewport宽度设为980px或1024px（可以通过document.documentElement.clientWidth获取这个宽度），但带来的后果是我们在移动端浏览web页面时，会出现横向滚动条。

但是为了提升用户体验，移动端的web必须要完美适应移动端屏幕，也即不能让用户缩放网页或者出现滚动条。所以我们的viewport必须设置成与屏幕大小相同，那么，怎么改变移动设备的默认viewport设置成我们想要的ideal viewport呢？这就轮到meta标签出场了！

三、meta标签

在移动端开发时，我们常常会在head标签加上如下：

该标签最大的作用是让当前viewport的宽度等于设备的宽度，即将viewport由默认变为ideal viewport，同时不允许用户缩放网页（缩放是相对于 ideal viewport来进行缩放的）。

四、rem和媒体查询

上面谈到使用meta标签可以得到ideal viewport，但页面内容的尺寸怎么定义呢？如果采用px，那么电脑端的尺寸拿到手机端肯定会超出屏幕显示范围（手机端变成了ideal viewport，（忽略各种手机型号）约为400px）。这里引入了两个新概念：媒体查询和rem。

• 媒体查询:其主要功能就是能够检测屏幕的大小，检测到屏幕大小之后就可以给不同尺寸的屏幕设置相应的css样式了呀，这下问题解决了吧？其实只解决了一半，因为对于一个固定大小的图片，你还得分批设置n个对应于各屏幕的尺寸大小，这样和开发n套页面没多大区别，其实要让图片适应屏幕变化，除了改变图片的像素的大小，还可以改变图片的计量单位啊，让我们的计量单位大小随着屏幕变化而变化，rem因此而生。
• rem:rem是一个相对单位，是相对于html根元素的字体大小而定的，html根元素默认的font-size大小为16px，默认1rem=16px，如果重新设置的话，那么1rem=新设置的值。

rem的具体值可通过媒体查询定义：如下

        @media screen and (min-width:414px) and (max-width:423px){

                html{font-size: 10.5px;}

        }

表示当屏幕尺寸在414px到423px之间时，1rem=10.5px，这样，当一个图片尺寸用rem作为单位时，在不同尺寸的屏幕上其代表的css像素数也不相同，这样就做到了移动端的适应。如果想做到更精确的话，还可以用js获取页面大小，再设置根元素font-size，不过通常媒体查询已经够用了！

参考：

https://www.cnblogs.com/2050/p/3877280.html

https://www.cnblogs.com/wenzheshen/p/6589459.html