AyayaOVO的博客

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh1. vw/vh的定义css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：这里我们发现视窗宽高都是100vw／100vh，那么vw或者vh，下简称vw，很类似百分比单位。vw和%的区别为：从对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh1. rem单位首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为12px，所以：1 rem = 12px为了计算方便，通常可以将html的font-size设置成：html{ font-size: 67.5% }这种情况下：

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh一. 百分比当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。为了了解百分比布局，首先要了解的问题是：css中的子元素中的百分比（%）到底是谁的百分比？直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。当然这种理解是正确的，但是根据css的盒式模

目录1. px与视口2. %3. 媒体查询4. rem5. vm/vh一. px与视口在静态页面中，通常使用px(像素)作为盒子容器宽高的单位，在pc端，通常认为css中,1px所表示的真实长度是固定的。那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？答案是否定的，pc端下和移动端下我们设置的font-size统一为16px。可以看出，字体都是16px，显然在pc端中文字正常显示，而在移动端文字很小，几乎看不到，说明在css中1px并不是固定大小，直观从我们发现在移动