【文件属性】：
文件名称：rem_layout:移动端网页 rem响应式布局 最佳实践代码
文件大小：1.41MB
文件格式：ZIP
更新时间：2021-06-07 02:43:41
HTML
移动端网页 rem响应式布局 最佳实践代码
WHAT IS IT
使用rem布局，屏幕越大，对应的“字体、图片、交互按钮”的大小也越大，同时大小能在用户旋转设备方向，或调整窗口大小（桌面端）时自动调整，如图：
使用经典的px并结合布局，在更大的屏幕上将展示更多的内容，同时，图片（此处没有使用弹性盒）、交互按钮也相对屏幕较小。如图：
WHY USE IT
在下列情况下，这种“rem响应式”布局会效果更好：
页面可交互元素（可点击的图片、按钮、链接等）较多——此时如果按照“固定像素布局”，dpi过高的屏幕，每个css像素所对应的物理长度毫米数较小，那么可交互元素就会特别小，不易操作。大家可以拿魅族MX3感受一下
页面需要考虑年龄较大、视力一般的用户——他们买大屏手机就是为了字体更大好不好？
页面是海报、广告、产品（或新功能）介绍性质，希望保持图片、文字相对屏幕的比例——在“固定像素布局”布局中
【文件预览】：
rem_layout-master
----show()
--------haibao_diff.jpg(371KB)
--------横竖屏切换自动调整.jpg(106KB)
--------4.1_Android上的chrome返回的w.screen.width为CSS像素.jpg(45KB)
--------wide_max_rem.jpg(396KB)
--------4.3_原生浏览器，在风景模式下，screen.width的值依然是窄边的宽度.jpg(54KB)
--------rem_all.jpg(286KB)
--------px_all.jpg(249KB)
--------4.1_切换肖像模式和风景模式时innerWidth不正确.jpg(48KB)
--------2.3.6_从一个未设置viewport的页面跳转过来时，起初innerWidth和screen.width都是不对的.png(33KB)
----readme.md(5KB)
----src()
--------ie8.html(3KB)
--------up.png(2KB)
--------p1.jpg(72KB)
--------rem.html(5KB)
--------viewport width=600.html(1KB)
--------px.html(1KB)
----.gitignore(8B)
----build()
--------rem.js(1KB)