REM布局

REM布局原理

本节主要学习从移动端 viewport 切入, 介绍rem的基本概念,从 viewport 与 font-size 两个方面介绍了移动端自适应方案并扩展到 PC 端,最后介绍了 css 新特征 vw 与 vh 方案。

01-21侠课岛    初级拔高       

前端/前端/前端系列课程P2 8     0     546

(十七)REM布局原理

1:基本概念

  • em - 当前对象内文本的字体大小相对单位

  • rem - 字体大小相对单位

  • 物理像素

  • 逻辑像素

  • 设备像素比 - dpr

  • <meta> 标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    • layout viewport - 浏览器默认视口 - 可以显示PC界面
    • clientWidth
    • 移动设备默认的viewport
    • visual viewport - 浏览器可视区域大小
    • innerWidth
    • ideal viewport - 理想viewport
    • iphone的ideal viewport宽度320px
    • initial-scale - layout viewport相对于ideal viewport缩放比例
    • 取width和initial-scale中较大值
    • initial-scale - 0.5 (左) - 1 (右)

2:适配设备屏幕 (移动端)

  • 最终目标 - 设计稿等比缩放在设备上

  • 动态处理Mate标签scale

    • 像素比 - 1 - scale=1
    • 像素比 - 2 - scale=2
    • 像素比 - 3 - scale=3
    • 获取设备的像素比
    var devicePixelRatio = window.devicePixelRatio;
    var scale = 1 / devicePixelRatio;
    
    var metaElement = document.createElement('meta');
    metaElement.setAttribute('name', 'viewport'); metaElement.setAttribute(
      'content',
      'initial-scale=' + scale + ',
       maximum-scale=' + scale + ',
       minimum-scale=' + scale + ',
       user-scalable=no'
    );
    
    document.documentElement.firstElementChild.appendChild(metaElement);
  • 动态处理根节点font-size

    var rem = document.documentElement.clientWidth / 10
    document.documentElement.style.fontSize = rem + 'px'

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

8

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?