Skip to main content

移动端适配

  • vw、vh and Rem
  • 百分比
  • 媒体查询
  • flexable

UI 同学给的设计稿

常见的设计图宽度,当然也可以是其他的宽度,比如 720 像素的

  1. 375 iPhone7
  2. 750 二倍图
  3. 320 iPhone5
  4. 640 二倍图

为什么给的是 375?因为这个是 iPhone7 的宽度,
也就是说最低兼容到 375 像素的屏幕。

vw+rem

先简单了解一下 viewport 和 vw、vh

viewport

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
属性名取值描述
width正整数定义布局视口的宽度,单位为像素
height正整数定义布局视口的高度,单位为像素,很少使用
initial-scale[0,10]初始缩放比例,1 表示不缩放
minimum-scale[0,10]最小缩放比例
maximum-scale[0,10]最大缩放比例
user-scalableyes/no是否允许手动缩放页面,默认值为 yes

vw/vh ?

单位含义
vw相对于视窗的宽度,视窗宽度是 100vw
vh相对于视窗的高度,视窗高度是 100vh
vminvw 和 vh 中的较小值
vmaxvw 和 vh 中的较大值

这里我们发现视窗宽高都是 100vw/100vh,那么 vw 或者 vh,下简称 vw,很类似百分比单位。vw 和%的区别为:

单位含义
%大部分相对于祖先元素,也有相对于自身的情况比如(border-radius、translate 等)
vw/vh相对于视窗的尺寸

动手、动手

设计图的宽度 = 设备宽度
375px = 100vw
1px = 100 / 375 vw = 0.26666666666 vw (约等于)

为了方便计算,放大 100 倍
100px = 26.66666666 vw(约等于)

给 html 标签设置 font-size 为 26.666666vw (约等于)

<html lang="en" style="font-size: 26.666666vw">

1rem 为 font-size 的大小
所以:
1rem = 100px
0.2rem = 20px
也就是说: 设计图上的 12px 换算成 rem 就是 0.12rem,20px 就写成 0.2rem 即可

info

优点:不需要引入新的 js,一行代码搞定适配问题

warning

缺点:浏览器兼容性差,IE9 以下不支持,但现代浏览器,特别是移动端,基本都支持

可以参考:

设计图大小(单位 px)html 的 font-size(单位 vw)备注
37526.666666效果图 20px,代码应该写 0.2rem
75013.333333效果图 20px,代码应该写 0.2rem
32031.25效果图 20px,代码应该写 0.2rem
64015.625效果图 20px,代码应该写 0.2rem

flexible + pxtorem

flexible 根据页面大小自动设置 font-size
再通过 pxtorem loader 把 px 自动转成 rem

媒体查询 and 百分比

成本过高

百分比问题 ?

css 中的子元素中的百分比(%)到底是谁的百分比?
直观的理解,我们可能会认为子元素的百分比完全相对于直接父元素,height 百分比相对于 height,width 百分比相对于 width。当然这种理解是正确的,但是根据 css 的盒式模型,除了 height、width 属性外,还具有 padding、border、margin 等等属性。那么这些属性设置成百分比,是根据父元素的那些属性呢?此外还有 border-radius 和 translate 等属性中的百分比,又是相对于什么呢?下面来具体分析。

  1. 子元素 height 和 width 的百分比

子元素的 height 或 width 中使用百分比,是相对于子元素的直接父元素,width 相对于父元素的 width,height 相对于父元素的 height。

  1. top 和 bottom 、left 和 right

子元素的 top 和 bottom 如果设置百分比,则相对于直接非 static 定位(默认定位)的父元素的高度,同样
子元素的 left 和 right 如果设置百分比,则相对于直接非 static 定位(默认定位的)父元素的宽度。

  1. padding

    info

    子元素的 padding 如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的 width,而与父元素的 height 无关。


  2. margin

    info

    跟 padding 一样,margin 也是如此,子元素的 margin 如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的 width。这里就不具体举例。


  3. border-radius

border-radius 不一样,如果设置 border-radius 为百分比,则是相对于自身的宽度

参考文章

响应式布局的常用解决方案对比(媒体查询、百分比、rem 和 vw/vh)