移动端布局

---

概述

当前移动端的现状：主流手机浏览器的内核是Webkit，而移动端布局面临的主要问题在于
手机分辨率碎片化太多，仅安卓手机的屏幕分辨率的类型数不胜数

---

viewport视口

视口：浏览器显示页面的屏幕区域；
PC端的网页在手机上显示效果不友好，而其原因是viewport没有设置好

meta标签设置：

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

width=device-width：改变HTML默认的980px 为 屏幕的宽度；
user-scalable: 是否允许用户缩放屏幕 值：no(0不允许) yes(1允许)；
initial-scale：初始化缩放比例；1.0：不缩放；
maximum-scale：用户对页面的最大缩放比例；值：比例
minimum-scale：用户对页面的最小缩放比例；值：比例

---

2倍图

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里；
从而达到更高的分辨率，并提高屏幕显示的细腻程度
此处对比PC提高分辨率的手段只是把显示屏越做越大，桌面图标越来越小，非常不方便

2倍图出现的意义：因为在不同分辨率的手机屏幕下，一张图片如果要保持原来的大小，必然
会出现失真的情况，因此需要人为地生成2倍图甚至3倍图来贴合不同手机屏幕的需求
一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素
二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素
三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素

---

移动端常见布局

单独制作移动端页面

• 流式布局 (百分比布局)
• flex弹性布局 (强列推荐)
• less+rem+媒体查询布局
• 混合布局

响应式页面兼容移动端

• 媒体查询
• bootstrap

---

flex弹性布局

flex布局的意义：操作方便，布局简单（相比传统布局），移动端应用非常广泛
而它的缺点是对PC端浏览器的支持性很差

flex布局的特点：

• 任何一个标签都可以指定使用 flex 布局
• 当为父标签设为 flex 布局以后，子元素的 float、clear 和vertical-align 属性将失效
• 使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素
• flex通过行和列的思路来控制布局；

flex布局的容器属性：

• flex-direction
  作用：确认主轴的选择，把主轴确认，元素默认按照确认的主轴方向进行排布
• justify-content
  整理版面，控制主轴上的元素的各种各样的对齐方式
• flex-wrap
  控制子元素是否换行
• align-items
  该属性是控制子项单行在侧轴（默认是y轴）上的对齐方式
  在子项为单项（单行）的时候使用； 整体一行元素看成整体，设置在侧轴上的对齐方式
• align-content
  设置子项在侧轴上的排列方式 ，并且只能用于子项出现换行的情况或者多行

flex布局的项目属性：

• flex
  子元素去占有（划分）在主轴上的剩余空间
• align-self
  控制子项，自己在侧轴上的对齐方式
  默认值auto，父级设置了align-items ，auto继承父级元素上设置侧轴的的对齐方式
  如果父级没有设置align-items 属性，auto默认值会变为strecth

---