# 响应式布局解决方案
# [px2rem](https://www.npmjs.com/package/px2rem)
# [hotcss](https://www.npmjs.com/package/hotcss)
# 媒体查询、百分比、rem 和 vw/vh
## px 和 视口
1. 像素
像素分为两种类型：css 像素和物理像素，css 像素是为 web 开发者提供的一个 css 中使用的抽象单位，
物理像素只与设备的硬件密度有关，任何设备的物理像素都是固定的
2. 视口
广义的视口是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口。
- 布局视口(layout viewport) 定义了 pc 网页在移动端的默认布局行为，通常 pc 分辨率比较大，布局视口默认 980px。
- 视觉视口(visual viewport) 表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口，不会影响布局视口的宽高。
- 理想视口(ideal viewport) 或者称为理想的布局视口，在移动设备中指设备的分辨率，给定设备物理像素情况下的最佳布�
