移动端布局

Misaka10032移动端页面布局二倍图flex弹性布局大约 12 分钟

现状

浏览器现状

UC QQ 欧朋 百度手机 360 安全 谷歌 搜狗手机 猎豹 以及其他杂牌浏览器。

以上均为移动端浏览器。

兼容移动端主流浏览器，处理 Webkit 内核浏览器即可。

手机屏幕

移动端设备屏幕尺寸非常多，碎片化严重。

Android 设备有多重分辨率：480x800，480x854，540x960，720x1280，1080x1920 等，甚至 2K、4K 屏等。

近年来 iPhone 的碎片化也加剧了，其设备的主要分辨率有：640x960，640x1136，750x1334，1242x2208 等。

作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px。

移动端调试方法

Chrome DevTools（谷歌浏览器）模拟手机调试

搭建本地 Web 服务器，手机和服务器一个局域网内，通过手机访问服务器

使用外网服务器，直接 IP 或域名访问。

视口

视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口

布局视口 layout-viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期 PC 端页面在手机上显示的问题

iOS，Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual-viewport

它是用户正在看到的网站区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来宽度。

理想视口 ideal-viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

  • 理想视口，对设备来讲，是最理想的视口尺寸

  • 需要手动添写 meta 视口标签通知浏览器操作

  • meta 视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

视口标签 meta

<meta
  name="viewport"
  content="width=device-width,
  user-scalable=no,
  initial-scale=1.0,
  maximum-scale=1.0,
  minimum-scale=1.0"
/>
属性解释说明
width宽度设置的是 viewport 宽度，可以设置 device-width 特殊值
initial-scale初始缩放比，大于 0 的数字
maximum-scale最大缩放比，大于 0 的数字
minimum-scale最小缩放比，大于 0 的数字
user-scalable用户是否可以缩放，yes or no(1 or 0)

标准 viewport 设置

  • 视口宽度和设备保持一致

  • 视口默认缩放比例 1.0

  • 不允许用户自行缩放

  • 最大允许的缩放比例 1.0

  • 最小允许的缩放比例 1.0

二倍图

物理像素&物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。

  • 开发时候的 1px 不是一定等于 1 个物理像素的。

  • 一个 px 能显示的物理像素点的个数，称为物理像素比或者屏幕像素比。

设备尺寸(英寸)开发尺寸(px)物理像素比(dpr)
iphone3G3.5320*4801.0
iphone4/4s3.5320*4802.0
iphone5/5s/5c4.0320*5682.0
HTC One M84.5360*6403.0
iphone64.7375*6672.0
Nexus 44.7384*6402.0
Nexus 5x5.2411*7312.6
iphone6 Plus5.5414*7363.0
Samsung Galaxy Note 45.7480*8533.0
Sony Xperia Z Ultra6.4540*9602.0
Nexus 7('12)7.0600*9601.3
iPad Mini7.9768*10241.0

多倍图

  • 在标准 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

  • 通常使用二倍图，但也有 3 倍图 4 倍图的情况，看实际需求。

背景缩放 background-size

属性：background-size: 背景图片宽度 背景图片高度;

  • 属性值可以是 px(50px 50px)、方向词(left center)、cover、contain。

  • 只写一个参数，高度省略的会等比例缩放。

  • 里面的单位可以跟%，相对于父盒子而言。

  • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

  • contain：把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。

其他图片格式

  • DPG 图片压缩技术：京东自主研发的图片压缩技术，能够兼容 jpeg，压缩后的图片和 webp 的清晰度对比没有差距。

  • webp 图片格式：谷歌开发的一种旨在加快图片加载速度的图片格式，图片压缩体积大约只有 jpeg 的 2/3，节省大量服务器宽带资源和数据空间。

移动端开发选择

单独制作移动端页面（主流）

通常情况下，网站域名前面加 m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳转至移动端页面。

响应式页面兼容移动端（其次）

通过判断屏幕宽度来改变样式，以适应不同终端。

缺点：制作麻烦，需要花很大精力去调兼容性问题。

移动端常见布局

移动端布局和 PC 端有所区别：

1.单独制作移动端页面（主流）

  • 流式布局（百分比布局）

  • flex 弹性布局（强烈推荐）

  • less+rem+媒体查询布局

  • 混合布局

    2.响应式页面兼容移动端（其次）

  • 媒体查询

  • bootstrap

流式布局

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动 web 开发使用的比较常见的布局方式。

max-width：最大宽度；min-width：最小宽度。height 同理

视口标签与样式初始化示例：

<meta
  name="viewport"
  content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>

body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 640px;
  background: #fff;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serif;
  line-height: 1.5;
  color: #666;
}

flex 布局

详见 CSS3 新属性-flex 布局

rem 适配布局（重要）

流式布局和 flex 布局带来的问题：

  • 页面布局文字能否随着屏幕大小变化而变化？

  • 流式布局和 flex 布局主要针对于宽度布局，高度如何设置？

  • 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

rem + 媒体查询 + less 预编译语言 提供了解决方案

rem

rem（root em）是一个相对单位，类似于 em，em 是父元素字体大小。

不同的是 rem 的基准是相对于 html 元素的字体大小。

比如，根元素(html)设置 font-size=12px;非根元素设置 width:2rem;则换成 px 表示就是 24px。

rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小，可以整体控制

媒体查询

媒体查询是 CSS3 新语法。

使用@media 查询，可以针对不同的媒体类型定义不同的样式

@media 可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会跟随重置

目前针对很多手机、平板等设备都用得到多媒体查询

语法：

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

@media only screen and (max-width: 500px) {
  .gridmenu {
    width: 100%;
  }

  .gridmain {
    width: 100%;
  }

  .gridright {
    width: 100%;
  }
}

  • 用@media 开头注意 @符号

  • mediatype：媒体类型

  • 关键字 and not only

  • media feature 媒体特性必须有小括号包含


  1. 媒体类型 mediatype

all：所有设备

print：打印机和打印预览

screen：电脑屏幕、平板电脑、手机等


  1. 关键字 not and only

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询条件。

  • not: not 运算符用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用 not 运算符，则还必须指定媒体类型。

  • only: only 运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时，旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

  • , (逗号) 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。 换句话说，列表的行为类似于逻辑或 or 运算符。

  • and: and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。


  1. 媒体特性

媒体特性必须加小括号包含

  • width：页面可见区域宽度

  • min-width：页面最小可见区域宽度

  • max-width：页面最大可见区域宽度

注意：为了防止混乱，媒体查询要按照从小到大或者从大到小的顺序来写。


示例代码：

媒体查询示例
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .row {
        border: 1px solid red;
      }
      .col {
        display: inline-block;
        width: 100%;
        height: 100px;
        background-color: green;
      }
      /* <768px */
      @media screen and (max-width: 768px) {
        .col {
          width: 100%;
        }
      }
      /* >=992 and  */
      @media screen and (min-width: 992px) {
        .col {
          width: 49%;
        }
      }
      /* >=768px and <1200px */
      @media screen and (min-width: 768px) and (max-width: 1200px) {
        .col {
          width: 48%;
        }
      }
      /* >=1200px */
      @media screen and (min-width: 1200px) {
        .col {
          width: 33%;
        }
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </body>
</html>
  1. 引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets(样式表)

原理就是直接在 link 中判断设备的尺寸，然后引用不同的 css 文件。

语法：

<link rel="stylesheets" media="mediatype and|not|only (media feature)" href="***.css">

link 引入同样遵循从小到大的方法

less 变量转换 rem

通过在 less 中声明变量，确定默认设计稿和默认等分数下的基准尺寸值，其余 px 属性写成(实际大小 px / 基准尺寸值) rem

// 此处默认设计稿750px与15等分，默认基准尺寸值 750 / 15 = 50px
@width: 50px;

.content {
  width: (100px / @width) rem;
  height: (50px / @width) rem;
}

less 详见 预编译语言#变量

实时响应式适配方案实现

响应式屏幕样式方案由 媒体查询 + less + rem 共同组成

  • 一般情况下我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果。现在基本以 750 为准。

① 假设设计稿是 750px

② 假设我们把整个屏幕划分为 15 等份（划分标准不一，可以是 20 份也可以是 10 等份）

③ 每一份作为 html 字体大小，这里就是 50px

④ 在 320px 设备的时候，字体大小为 320 / 15 就是 21.33px

⑤ 用我们页面元素的大小，除以不同的 html 字体大小会发现它们比例还是相同的

⑥ 比如我们以 750 为标准设计稿

⑦ 一个 100*100 像素的页面元素在 750 屏幕下，就是 100 / 50 转换为 rem 是 2rem * 2rem，比例还是 1 比 1

⑧ 320 屏幕下，html 字体大小为 21.33，则 2rem = 42.66px，此时宽和高都是 42.66，宽和高的比例还是 1 比 1

⑨ 已经能实现不同屏幕下 页面元素盒子等比例缩放的效果


  • 元素 font-size 取值方法

① 最后的公式：页面元素的 rem 值 = 页面实际元素值(px) / （屏幕宽度 / 划分的份数）

② 屏幕宽度 / 划分的份数 就是 html font-size 的大小

③ 或者：页面元素的 rem 值 = 页面实际元素值(px) / html font-size 字体大小


重点

  1. 媒体查询提供不同设备、不同屏幕下 html 根元素的 font-size 字体大小基准值

  2. 在已知设计稿宽度（如 750px）和切割份数（如 15 等份）的前提下，以 750 / 15 = 50px 的 font-size 为基准进行宽高比例计算，此时通过 less 中的变量声明 @width = 50px; 以及 less 允许的四则运算方式，样式表中所有涉及 px 单位的书写均可表示为 (实际大小 / @width) rem，以此实现全尺寸属性的比例化。

  3. 其余设备屏幕下的 html font-size 字体大小基准值，根据媒体查询动态调整，同时全元素尺寸属性通过 rem 比例数值动态调整尺寸。

  4. 现阶段可实现的技术方案有限，后期学习 js 和框架之后有两种方案可选：

① script 引入 flexible.js 提供的默认 750 / 15 等份媒体查询方法可提供媒体查询与设备的匹配关系方案，开发者只需要关注 rem 尺寸比例即可。

② 前端工程化之后，开发者更是直接正常书写 px 属性，项目整体打包之前，打包软件会对项目全局样式进行预扫描和预处理，将全部的 px 属性根据媒体查询匹配方案自动转换为 rem 比例值，最后再统一导入样式文件。