标签：document html元素 web开发 移动端 设备 网页 不用 之间 element
移动端适配的问题，一般来说我们都不会去深究，因为这种东西都是配置一次就再也不用管的了，接到设计图就按照祖传套路撸就完事了。按部就班的必定只能成为活动页写手，研究透彻以后，才能成为一名专业的活动页写手嘛。
纠缠不清的关系
文章开始，我们需要来捋清楚像素、视口以及缩放之间种种藕断丝连的关系，来抽丝剥茧一波。
像素
像素我们写得多了，不就是px嘛，为什么要拿出来说呢？因为像素还不仅仅就是px。
设备像素
设备像素也可以叫物理像素，由设备的屏幕决定，其实就是屏幕中控制显示的最小单位。
设备独立像素
设备独立像素是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素。
DPR
设备像素与设备独立像素之间的关系就是，DPR（设备像素比），设备像素比 = 设备像素 / 设备独立像素。这条公式成立的前提是，缩放比为1，原因下面讲到缩放的时候就会知道。根据这种关系，如果设备像素大于设备独立像素（DPR大于1的设备，我们常说的高清屏或者Retina屏），就会出现一个设备独立像素对应多个设备像素的情况：
视口
遥想从前智能手机刚出的时候，很少网站去特意适配移动端，然而用户是可以直接从手机去访问PC端网站的，所以怎样显示好一个网站，无论这个网站是一个PC网站还是移动端网站，就是亟需解决的问题。所以移动端三个视口布局视口、视觉视口、理想视口横空出世，成为各种移动适配方案的基础。
布局视口
布局视口是在html元素之上的容器，我们的页面就“装”在布局视口中。
想想我们常写的width:100%，这个100%是基于什么计算出来的呢？去翻资料会看到：如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。那html元素的包含块是什么呢？没错，就是我们的布局视口，它是所有CSS百分比推算的根源，如果说CSS是一支画笔，那么布局视口就是那张画布吧。这张画布有一个默认尺寸（如果没有手动去设置meta viewport），一般在768px ~ 1024px间，可以通过document.documentElement.clientWidth获取。这样一来，网页的布局就不再受限于设备的尺寸，即使是小屏幕的移动端设备中也能容得下PC网站。
标签：document html元素 web开发 移动端 设备 网页 不用 之间 element
原文地址：https://www.cnblogs.com/azmiro/p/13789310.html
