欢迎光临
我们一直在努力

移动web入门 | 常见单位

web开发常见单位

  • px :绝对字体大小
  • em:基于一个自身元素font-size来进行计算相对大小
  • rem:基于根节点(即HTML节点)font-size来计算相对大小
  • vw: 可视区宽度单位,1vw等于可视区宽度的百分之一
  • vh: 可视区高度单位,1vw等于可视区高度的百分之一

移动端rem适配

在<script>标签中加入

window.onresize = function(){
  document.documentElement.style.fontSize = document.documentElement.offsetWidth / 20 +'px';
}
  • document.documentElement.style.fontSize 是得到标签并为它设置font-size样式字体大小,因为REM计算的规则是依赖根元素也就是元素的字体大小
  • document.documentElement.offsetWidth 是获取整个视口的宽度

document.documentElement.offsetWidth / 20 这里的20不是固定的,这里 / 20 是把屏幕均分为20份,当然也可使用16、18...

注意:Chorme浏览器字体最小只能为12px,所以这里的最后结果最好别小于12

赞(1) 打赏
未经允许不得转载:散人研 » 移动web入门 | 常见单位
分享到: 更多 (0)

评论 抢沙发

5 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏