布局常用解决方案对比（媒体查询、百分比、rem 和 vw-vh）
在前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem 和 vw/vh 等。在这篇文章中，我们从 px 单位出发，分析了 px 在移动端布局中的不足，然后介绍了几种不同的自适应解决方案。
我们需要了解 px 单位在移动端的不足。在 pc 端，通常认为 css 中 1px 所表示的真实长度是固定的。但是，事实证明，px 单位在移动端的表现并不如我们所期望的那样。在移动端，1px 所表示的长度较小，导致文字显示不清楚。这是因为在 css 中 1px 的真实长度是由设备的硬件密度决定的。
为了解决这个问题，我们需要了解像素和视口的概念。像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域。像素分为两种类型：css 像素和物理像素。css 像素是 web 开发者提供的抽象单位，而物理像素只与设备的硬件密度有关。
在了解像素和视口的概念后，我们需要了解视口的概念。广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口。布局视口定义了 pc 网页在移动端的默认布局行为，而视觉视口表示浏览器内看到的网站的显示区域。理想视口或者说分辨率，就是给定设备物理像素的情况下，最佳的“布局视口”。
在移动端中，我们可以通过 viewport 元标签来控制布局，例如：<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">。这个 meta 标签的每一个属性的详细介绍如下：
* width：定义布局视口的宽度，单位为像素
* height：定义布局视口的高度，单位为像素，很少使用
* initial-scale：初始缩放比例，1 表示不缩放
* minimum-scale：最小缩放比例
* maximum-scale：最大缩放比例
* user-scalable：是否允许手动缩放页面，默认值为 yes
通过了解这些知识点，我们可以更好地理解布局常用解决方案，并选择合适的解决方案来解决移动端布局问题。
媒体查询是另一种常用的自适应解决方案。媒体查询是通过媒体类型和设备特性来应用不同的样式。例如，我们可以使用@media screen and (max-width: 960px)来应用不同的样式在不同的设备上。
百分比是另一种常用的自适应解决方案。百分比是通过将元素的尺寸设置为父元素的百分比来实现自适应的。例如，我们可以使用width: 50%来将元素的宽度设置为父元素的 50%。
rem 是另一种常用的自适应解决方案。rem 是相对单位，相对于根元素的 font-size 来计算的。例如，我们可以使用font-size: 16px来将根元素的 font-size 设置为 16px，然后使用rem 来设置元素的尺寸。
vw 和 vh 是最新的自适应解决方案。vw 和 vh 是相对视口的单位，vw 表示视口的宽度，vh 表示视口的高度。例如，我们可以使用width: 50vw来将元素的宽度设置为视口的 50%。
我们可以通过了解布局常用解决方案来选择合适的解决方案来解决移动端布局问题。
