rem_layout: 移动端网页的rem响应式布局最佳实践代码

移动端网页 rem响应式布局 最佳实践代码 WHAT IS IT 使用rem布局，屏幕越大，对应的“字体、图片、交互按钮”的大小也越大，同时大小能在用户旋转设备方向，或调整窗口大小（桌面端）时自动调整，如图： 使用经典的px并结合布局，在更大的屏幕上将展示更多的内容，同时，图片（此处没有使用弹性盒）、交互按钮也相对屏幕较小。如图： WHY USE IT 在下列情况下，这种“rem响应式”布局会效果更好： 页面可交互元素（可点击的图片、按钮、链接等）较多——此时如果按照“固定像素布局”，dpi过高的屏幕，每个css像素所对应的物理长度毫米数较小，那么可交互元素就会特别小，不易操作。大家可以拿魅族MX3感受一下 页面需要考虑年龄较大、视力一般的用户——他们买大屏手机就是为了字体更大好不好？ 页面是海报、广告、产品（或新功能）介绍性质，希望保持图片、文字相对屏幕的比例——在“固定像素布局”布局中