关于响应式设计

单位介绍

vh & vw

1vh = 1% viewport height （视口高度）
1vw = 1% viewport width （视口宽度）

相对单位

em:
对于字体大小（font-size）：1em = 父元素的字体大小；
对于margin和padding：1em = 该元素自身的字体大小；

rem:
总是相对于root html元素，所以rem值默认为16px的倍数。

单位使用建议

font-size: rem
margin & padding: em
line-height: 无单位数值
width: %
max-width: px

设计原则

手机用户优先原则：也意为内容优先原则；首先为手机用户优化用户体验。先设计手机端的基础CSS，再使用媒体查询为更宽更大的屏幕调整布局和设计。