前言

本部分内容主要是以移动端为主，主要介绍了移动端布局的方式方法。

其实按理是写到CSS笔记里的，但寻思着CSS笔记太乱没整理来着，就另开一篇笔记来写这个内容吧。

其中用到的是新的布局方式flex布局，也叫弹性布局。

当然，这个也自然是为我复习而用，其内容不适合其他人查阅。

1. 移动端基础概述

移动端布局常用于在手机端或iPad等终端设备，因为较于PC端，其终端设备的分辨率不同，页面展示也就有所不同。故此需要进行另外的布局，以相应其移动端的布局。

PC端常见的浏览器多是360浏览器、谷歌浏览器、火狐、QQ、百度、搜狗、IE等浏览器，而移动端的浏览器大多也是基于其Webkit修改的内核，所以兼容性都是良好的。

由于其分辨率的不同展示想效果不同，所以调试方法就需要在移动端设备了，目前可使用一些浏览器的模拟手机调试功能，又或搭建本地web服务器，移动端使用局域网访问。

2. 视口

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

2.1 布局视口 (layout viewport)

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

IOS、Android基本都将这个视口分辨率设置为980px，所以PC端的页面在手机端看上去会被缩放，其元素也看上去很小，故此需要进行拖放网页来进行查看。

2.2 视觉视口 (visual viewport)

如同视觉二字，是用户正在看到的网站的区域，便是视觉视口。

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

2.3 理想视口 (ideal viewport)

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

对设备来讲，理想视口是最理想的视口尺寸(这好像是废话)。

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

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

小知识：乔布斯提出的理想视口概念。

2.4 meta视口标签

语法：

1
<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或no (1或0)。

标准的viewport设置：

  • 视口宽度和设备保持一致。
  • 视口默认缩放比1.0。
  • 不允许用户自行缩放。
  • 最大允许缩放比1.0。
  • 最小允许缩放比1.0。

3. 二倍图

由于其设备的分辨率不同，其元素内容显示不同，因此在一些元素设置大小时需要进行放大处理。

3.1 物理像素&物理像素比

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

在开发的时候1px不是一定等于1个物理像素。PC端页面，1px等于1个物理像素，但是移动端就不尽相同。

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

3.2 多倍图

因分辨率不同，其在PC端显示的图片可能显示正常，但放其移动端设备会被放大，因此会造成图片的模糊，为了解决这样的问题，使用倍图来提高图片质量，解决在高清设备中的模糊问题。

通常使用二倍图，但由于其他设备的不同，也会存在三倍四倍的情况。

3.3 二倍精灵图的做法

  1. 在firework里把精灵图等比例缩放为原来的一半。
  2. 之后根据大小测量坐标。
  3. background-size写精灵图原来的宽度的一半。

4. 移动端开发选择

移动端常见的开发选择有两种，一种是另写移动端的页面、一种是写想响应式的页面，根据不同的宽度应用不同的样式效果（但制作麻烦）。

4.1 CSS初始化 (normalize.css)

移动端CSS初始化推荐使用

其特点：

  • 保护了有价值的默认值。
  • 修复了浏览器的bug。
  • 是模块化的。
  • 拥有详细的文档。

官网地址：normalize.css

5. 移动端常见布局

移动端布局和PC端布局：

  1. 单独制作移动端页面
    • 流失布局（百分比布局）
    • flex 弹性布局
    • less+rem+媒体查询布局
    • 混合布局
  2. 响应式页面兼容移动端
    • 媒体查询
    • bootstarp

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

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

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

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

但因为可伸缩的问题，盒子里面的内容会因为盒子变小，且内容被挤压换行。故此引入了max-width和min-width代码，前者是表示盒子最大宽度不超过的值，后者表示盒子最小宽度不低于的值。