原稿：语雀 · CSS 样式技巧 · 原目录：CSS › CSS 样式技巧

rem 使用

参考链接：

如何去根元素的 font-size 大小，才能让页面在不同屏幕大小看起来一致

  1. 首先设置 header 的 meta，让 viewport 宽度自动调整为设备宽度，下面的设置意义是：将页面布局视口设置为设备理想视口（即让页面完全展示在设备可视区）
<meta name=”viewport” content="width=device-width, initial-scale=1">
  1. 在 header 中设置 <script>
 <script type="text/javascript">
   let cw = document.documentElement.clientWidth;
　　document.documentElement.style.fontSize = 32 * (cw / 640) + 'px';
 </script>

Document.documentElement 会返回 <html> 元素，使用 clientWidth 获得 viewport 宽度

通常 UI 设计稿宽度为640 px，因此除以 640。如果不乘 100，当设备宽度320 px 时，可得1rem= 0.5px，则 <html> 元素的 font-size=0.5px，小于 12px，在浏览器中可能有计算问题，因此这里先放大 100 倍，则实际1 rem=50px。

在一个320px的设备上，以上设置的意义： 2. 首先定好最终的 1rem = ? px，这里假定为浏览器默认字体大小16px 4. 计算 x*(320/640)=16，得到x=32，即为答案预定比例，这里的系数必须为32 6. 此时 1rem=16px 8. 之后的元素都是用 rem 布局：设计稿上 160px 的元素

  • 320px 设备：实际需要 160*(320/640)=80px，则 80px/16px=5rem，设置元素宽度为5rem
  • 480px 设备：重新计算此时 32*(480/640)=24px，则当前设备 1rem=24px，24px*5=120px

设置5rem后，在320px的设备中，元素宽度是80px，在480px的设备中，元素宽度自适应为120px

元素宽高 & 坐标

元素宽高

方式一：dom.style.width/height （仅取出内联样式中设置的宽高，有单位）

方式二：dom.clientWidth/Height（包括元素宽度、内边距，不包括边框和外边距）

方式三：dom.scrollWidth/Height（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距）

方式四：dom.offsetWidth/Height（包括元素宽度、内边距和边框，不包括外边距）

方式五：dom.getBoundingClientRect().width/height （等于 offsetWidth/Height）

获取元素距离页面顶端距离

参考链接：关于offsetTop的理解 2. dom.getBoundingClientRect().top：gBCR().top 获取的是元素距离视口顶部的距离 4. dom.offsetTop：offsetTop 得到的是当前元素距离被定位父元素 offsetParent（即使用了 fixed/absolute/relative）padding top 的距离，当未找到 offsetParent 时，则将 <body> 作为 offsetParent

获取页面可视区大小

实测唯一正确方法：
document.documentElement.clientHeight
错误方法：
body.clientHeight/offsetHeight //二者在 body 无边框时相等，都是完整 <body> 高度
documentElement.offsetHeight   //获取完整 <html> 高度

判断元素未进入/进入/离开可视区

方法一：偏移量计算

// 未进入
dom.offsetTop >
document.documentElement.clientHeight + document.documentElement.scrollTop
// 已离开
document.documentElement.scrollTop > dom.offsetTop + dom.offsetHeight
// 其余情况：处于可视区

方法二：getBoundingClientRect()

// 未进入
dom.getBoundingClientRect().top > document.documentElement.clientHeight
// 已离开
dom.getBoundingClientRect().top + dom.offsetHeight < 0
// 其余情况：处于可视区