vue中的自适应布局（ px与视口）

目录

1. px与视口
2. %
3. 媒体查询
4. rem
5. vm/vh

一. px与视口

在静态页面中，通常使用px(像素)作为盒子容器宽高的单位，在pc端，通常认为css中,1px所表示的真实长度是固定的。

那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？

答案是否定的，pc端下和移动端下我们设置的font-size统一为16px。

可以看出，字体都是16px，显然在pc端中文字正常显示，而在移动端文字很小，几乎看不到，说明在css中1px并不是固定大小，直观从我们发现在移动端1px所表示的长度较小，所以导致文字显示不清楚。

那么css中的1px的真实长度到底由什么决定呢？
为了理清楚这个概念我们首先介绍像素和视口的概念。
1.像素
像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。

我们在js或者css代码中使用的px单位就是指的是css像素，物理像素也称设备像素，只与设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素也就越多。下表表示css像素和物理像素的具体区别：

css像素: 为web开发者提供，在css中使用的一个抽象单位

物理像素