移动端适配原理

说到移动端适配，做前端的同学肯定不会陌生，面试的时候可能也会问到相关问题。为何要写这篇文章？我最近学习移动端适配，参考了很多文章，写的都很不错，但是感觉都不太全面，对小白同学不太友好，所以今天写下这篇文章，记录下自己的一些思考，免得遗忘，也希望能够帮助到和我一样对这个问题感到迷惑的同学。

1. 一些概念

想要弄懂适配问题，你需要了解很多单位的含义：PX，PT，PPI，DPR，viewport …
这里不全部讲，只说一部分，具体的会单独放在另一篇文章里面。

1.1 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段代码大家肯定都见过，这里来详细说一说。

定义

viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
这里是引用

如果没有viewport，横屏的PC