单位全汇总
- 单位
单位类型 描述 px 固定单位 % 参照对象 - 父元素的尺寸 em 参照对象 - 父元素的字体大小 rem 参照对象 - 根元素的字体大小 vw/vh 参照对象 - 视口的大小 vmin 选取 vw 和 vh 中最小的那个 vmax 选取 vw 和 vh 中最大的那个 - 设计稿
设计稿尺寸 屏幕分辨率 DPR 640*1136 iphone5 320*568 2.0 750*1334 iphone6 375*667 (常见的设计稿尺寸 > 1334 多屏) 2.0 1242*2208 iphone6p 414*736 3.0 - 移动端适配 rem & vw 计算工具
vw 弹性适配
- 单位：
- vw : 1vw 等于视口宽度的 1%
- vh : 1vh 等于视口高度的 1%
- vmin : 选取 vw 和 vh 中最小的那个
- vmax : 选取 vw 和 vh 中最大的那个
- 视口单位 vs 百分比单位：
- 视口单位区别于 % 单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；
- 而 % 单位则是依赖于元素的祖先元素；
动态 rem 适配
- rem 方案原理
- rem 方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间；
- 1rem 等于此页面 html 的 font-size，rem 可以理解为每份是多少 px，比如说，设计稿宽度为 750px，我们规定将页面划分成 10 份，那么 rem=75px，如果有一个 div 宽度为 75px，就刚好为 1rem；
- 即，将 750px 宽的屏幕划分为 10 份，这个 div 宽度占一份，那么只需要让此 div 在不同宽度的屏幕下宽度都占一份，就行了；
- 那么我们只需要做一件事，就是确定不同的屏幕下一份有多宽，即不同设备下 1rem 等于多少 px？这很容易计算，document.body.clientWidth / 10 就能算出来屏幕的 rem；
![]( "rem")
- 通过这个式子很清楚地看到，核心思想就是把不同的屏幕划分成相同的份数，在设计稿中占一份的，在所有设备屏幕上都应该占一份；
- 示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rem单位</title> <style> .box { border: 1px solid #000; width: 2rem; height: 2rem; background: red; } </style> </head> <script> function refreshRem() { var ratio = 10; // // 750/75 = 10，说明 1rem = 75px，将屏幕分成了 10 份 document.documentElement.style.fontSize = document.documentElement.clientWidth/ratio + 'px'; } refreshRem(); window.addEventListener('resize', refreshRem); </script> <body> <div class="box"></div> </body> </html>
弹性 flex 适配（使用 flex 布局）
打赏作者
您的打赏是我前进的动力
微信
支付宝
媒体查询
上一篇
评论
