移动端 自适应布局方案

文章目录

  • DPR
  • rem布局
    • 实现机理
    • 优点
    • 缺点
    • 相关技术方案
  • viewport 布局
    • 优点
    • 缺点
    • 相关技术方案
  • 媒体查询+等比缩放原理

DPR

DPR = 设备物理像素 / CSS像素

  • DPR = 2 为例,把 4(2x2)个物理像素当一个 CSS 像素使用
    移动端 自适应布局方案_第1张图片
    移动端 自适应布局方案_第2张图片

rem布局

rem 就是相对于根元素 html 的 font-size 来做计算

  • 实现机理

  • 假设将屏幕宽度分为100份,将1份的大小设置成根元素字体大小
document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';
  • 当设计稿为 750 * 1334,设计稿中元素宽度为200时,则元素占比为200/750,对应的份数为200/750*100=26.67份,而1份为1rem,最终css宽度为26.67rem

优点

  • rem 的兼容性能低到 ios 4.1,android 2.1

缺点

  • 类似rem这种等比缩放原理的,在pc端容易布局崩坏,需要额外设置最大宽度,以及1px等场景需要额外实现
var clientWidth = document.documentElement.clientWidth;

clientWidth = clientWidth < 780 ? clientWidth : 780;

document.documentElement.style.fontSize = clientWidth / 100 + 'px';

body {
 margin: auto;
 width: 100rem;
}

相关技术方案

  • flexible(amfe-flexible 或者 lib-flexible) + postcss-pxtorem

viewport 布局

这里的视窗(Viewport) 指的是浏览器可视化的区域window.innerWidth/window.innerHeight 的大小

html { font-size: 1vw} // 相比于rem不用再通过js设置

div {
 width: 26.67rem  // vw还可以与rem组合使用
}

优点

  • 不需要js动态计算
  • 兼容性良好

缺点

  • 因为原理也是等比缩放,所以和rem缺点一样

相关技术方案

  • postcss-px-to-viewport

媒体查询+等比缩放原理

通过媒体查询适应不同机型,配合rem或vw进行布局

html {
    font-size: 16px; 

    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}

你可能感兴趣的:(移动端与REM,css,html,css3)