移动端 rem 布局
-
viewport 视口宽度 (clientWidth)
- 当浏览器宽度小于 980px 时,视口宽度就是 980px ,当浏览器宽度大于 980px时,视口宽度和浏览器宽度保持一致
-
移动端布局
- 移动端使用 视网膜高清屏(Retina)
- Retina 屏幕有一个属性叫 dpr(设备像素缩放比) = 物理像素 / 逻辑像素
- 比如 iPhone 6 的宽度 750,这就是物理像素,而我们开发时写的 375 px 就是逻辑像素
-
布局单位
- 百分比布局(%)
- 简单,无须设置,兼容性好,基于父元素的属性来设置的,如果父元素没有设置宽高,就会失效
- vwvh 布局
- 一个 vw 等于 viewport 宽度的百分之一,一个 vh 等于 viewport 高度的百分之一
- 简单,无须设置,但兼容性不好
- rem 布局
- 一个 rem 等于根元素(html)的字体大小
- 兼容性好,使用简单,但需要设置
- 百分比布局(%)
-
rem 适配
-
rem 本身是一个不能自适应的单位,不会跟着设备尺寸不同而改变,但是可以利用 js 代码动态设置它
-
方法一:
- 我们可以将 1rem 设置成屏幕的某一个比例,比如将 1rem 设置成屏幕的十分之一,假设我们的设计图是 640px 宽的,我们拿到之后量了一下 a 的宽度为 480px,得到比例 a 所占屏幕 3/4,根据 rem 与屏幕的关系,最后设置成 0.75 * 10 rem,就是说在设置元素的宽度是时候,会根据设定好的比例关系去进行换算
<script> dovument.documentElement.style.fontSize = document.documentElement,clientWidth / 10 + 'px' </script>
-
方法二:
-
在手机宽度为 320px 时,我们设置的 1rem = 100px,可以得到一个比例 b = 100/320
那么在 W 宽度的手机上,1rem 应该是多少呢?设为x, 那么 x / w = b
得到 x = w / 3.2
<script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.2 + 'px' // 如果这里写的是除以 6.4 后面就不用再除 2 了 // 假设这个时候在设计图上量出 200px 那么写的时候就是 200 / 2 / 100 = 1rem </script>
-
-
需要注意的问题:
- 1px 边框处理: 在移动端中,如果给元素设置 1px 的边框的话,那么在手机上看起来是会比一个像素粗的。解决方法:使用伪元素模拟边框,使用 transition: scale(0.5) 进行缩放
- 响应式图片处理
img{ max-width: 100%; <!--当盒子 width 比图片大时,图片保持自身最大,不会进行拉伸--> display: block; margin: 0 auto; }
-
其实,开发时不需要我们手动去设置,rem 布局可以使用第三方插件,自动将 px 单位转换成 rem 单位
查看链接