移动端的适配

更新于 2019-12-24  约 6 分钟

移动端的适配涉及响应式设计和页面自适应:

页面响应式设计:

响应式设计表示在不同的屏幕尺寸下,都有良好的布局和内容表现,简单说,就是一个页面可以适配多种不同尺寸的屏幕,而且看上去还是设计良好的。
为了实现这个目的,可能会利用css媒体查询,js或者css去动态改变布局的尺寸,在这个过程中会伴随元素尺寸的改变,布局的改变,甚至会把元素隐藏。

页面自适应:

页面的设计与设计稿的设计比例一致,这个也是做自适应的目的,在这个过程中针对不同的屏幕宽度元素的尺寸也会改变,但是一般不会有布局改变,和元素的隐藏。

项目使用自适应方案介绍

前言

比较出名的自适应框架:flexible.js【淘宝方案】,最近项目使用的也跟这类似【自适应的做法:一般来说是rem+flex布局】。
+缺点:使响应式样式设置变繁琐
局部响应样式:除了使用 @media screen and (max-width: (...)px) 还得 @media screen and (max-device-width: (...)px)
全局非自适应插件样式的引入: 还得针对dpr进行响应式样式的处理
+优点:不用处理1px的边框问题,不会使边框显粗【在Retina屏即dpr>1的情况下,使1px就大概为一个物理像素点】

需要理解的概念

  1. 物理像素(physical pixel):就是设备中可以显示光的点,我们常说的手机分辨率也是指的物理像素。
  2. 设备独立像素(density-independent pixel):类似尺子的刻度,前端说的px单位指的就是设备独立像素
  3. 设备像素比(device pixel ratio):物理像素/设备独立像素 ,也就是常说的dpr
  4. 布局视口: 该标签主要用来告诉浏览器如何规范地渲染Web页面,每个设备有一个默认视口宽度
    在iphonex【屏幕大小:375X812;分辨率:2436X1125像素;默认的视口宽为980】设置如下meta标签:
    <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
    在布局视口750X1642【 放大了2倍】上计算元素大小,然后再整体缩小2倍到设备屏幕上显示

实现操作处理

  1. 根据设备及移动端的设计稿尺寸设置html标签的data-dpr和font-size属性【常见的视觉稿大小大至可为640、750、1125三种】
    为计算方便&小数点的处理,一般把尺寸分为10等分或者100等分【100等分也因与vw单位靠齐】来设计html的font-size,data-dpr用于处理字体的大小
  2. 设定视口标签的属性,来确定布局视口及缩放比例,

    • <meta name="viewport" content="width=device-width,initial-scale=1.0" /> :将布局视口设定为设备大小
    • <meta name="viewport" content="initial-scale=1/x, maximum-scale=1/x, minimum-scale=1/x, user-scalable=no" /> : 将布局视口设定为x倍的设备大小
  3. 元素的占位大小采用rem为单位,页面的布局基本采用flex布局【流行方便】
  4. 字体根据data-dpr的属性设定以px为单位的大小,原因如下:

    1. 大多数的字体文件都自带一些点阵尺寸,为方便设置字体为偶数
    2. 肉眼看到的字体大小在各屏幕下应该相同

相应的代码操作【详细的可以去看flexible.js】

  • 布局视口的方法
// 第一种:getBoundingClientRect
var width = docEl.getBoundingClientRect().width
// 第二种:clientWidth
var width = document.documentElement.clientWidth
  • 可利用样式预处理器处理字体的设定
// scss处理器:定义宏方法
@mixin font($fontSize2x) {
  $fontSize: $fontSize2x/2;
  @if (unitless($fontSize)) {
    font-size: $fontSize + 0px;
    [data-dpr='2'] & {
      font-size: $fontSize * 2 + 0px;
    }
    [data-dpr='3'] & {
      font-size: $fontSize * 3 + 0px;
    }
  } @else {
    font-size: $fontSize;
    [data-dpr='2'] & {
      font-size: $fontSize * 2;
    }
    [data-dpr='3'] & {
      font-size: $fontSize * 3;
    }
  }
}
// 样式文件中引用 
.className {
  @include font(16);
}

其他方案介绍及对比

  • 网易方案:没有动态设置视口meta,直接使用width=device-width的布局视口
    这种方案使响应式样式设定简单,但需要额外处理1px边框显粗的问题
  • 在视口meta便签中固定width,然后再整体缩放到设备屏幕:<meta name="viewport" content="width=640, user-scalable=no">
    不能使用css媒体查询做响应式,需要额外处理1px边框的问题
阅读 209更新于 2019-12-24

推荐阅读
目录