Web——＞移动端布局

一、移动端基础

1、视口（viewport）
就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
布局视口：固定为960px
视觉视口：随意的视口，通过缩放控制。
理想视口：手动添加meta视口标签通知浏览器操作，设备有多宽，我们布局的视口就有多宽。

2、meta视口标签：
标准的viewpor：
 

<meta name="viewprot" content="width=devixe-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0">

width: 宽度设置的是viewport宽度，可以设置device-width的特殊值
initial-scale： 初始化缩放比，大于0的数字
maximum-scale：最大缩放比，大于0数字
minimum-scale：最小缩放比，大于0数字
user-scalable： 用户是否可以缩放，yes或no（1或0）

3、二倍图：
物理像素&物理像素比
• PC端和早前的手机屏幕：1CSS像素 = 1物理像素的，后来移动端采用Retina（视网膜屏幕），将更多的物理像素的压缩到一块屏幕里，从而达到更高的分辨率。
• 在标准的viewport设置中，使用倍图来提高质量影响。

4、技术选型
移动端常见布局
移动端技术选型
（1）、单独制作移动端页面（主流）
* 流式布局（百分比布局）
* flex弹性布局（强烈推荐）
* less+rem+媒体查询布局
* 混合布局
（2）、响应式页面兼容移动端（其次）
* 媒体查询
* bootstarp

二、流式布局

流式布局（百分比布局）
• 流式布局，就是百分比布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两次填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式。
◦ max-width 最大宽度（max-height最大高度）
◦ min-wdth 最小宽度（min-height最小高度）

三、flex弹性布局

（一）布局原理：
• flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局（众生平等）。
• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。
• 总结：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。


（二）flex布局父项常见属性
• flex-direction： 设置主轴的方向
• justify-content： 设置主轴上的子元素排列方式
• align-items： 设置侧轴上的子元素排列方式（单行）
• align-content： 设置侧轴上的子元素的排列方式（多行）、
• flex-warp： 设置子元素是否换行
• flex-flow： 复合属性，相当于同时设置了flex-direction和flex-wrap

1、flex-direction设置主轴方向：
1. 主轴与侧轴
在flex布局中，分为主轴和侧轴两个方向，同样叫法有：行和列、x轴和y轴。
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
2. 属性值
flex-direction属性决定主轴的方向（即项目的排列方向）
3. 注意：
主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的。

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从上到下

2、justify-content设置主轴上的子元素排列方式
justify-content属性是控制子项再主轴（默认是x轴）上的排列方式 在子项为单项的时候使用
注意：使用这个属性之前一定要确定好主轴

属性值	说明
flex-start	默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴，则水平对齐）
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间（重要）

3、align-items设置侧轴上的子元素排列方式（单行）
该属性是控制子项再侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值，没有高度时）

4、align-content设置侧轴上的子元素排列方式（多行）
设置子项在侧轴上的排列方式 并且只能由于子项出现换行的情况（多行），在单行时没有效果
属性值        说明
flex-start        默认值在侧轴的头部开始排列

flex-end        在侧轴的尾部开始排列

center        在侧轴中显示

space-around        子项在侧轴平分剩余空间

space-between        子项在侧轴先分布在两头，再平分剩余空间

stretch        设置子项元素高度平分父元素高度

5、flex-wrap设置子元素是否换行
默认情况下，子元素都排在父元素的一条线（又称“轴线”）上不换行。flex-wrap属性定义决定换不换行，flex布局中默认是不换行的。
nowrap  ：      默认值，不换行
wrap ：       换行

6、flex-flow属性时flex-direction和flex-wrap属性的复合属性
设置主轴和是否换行（换列）
flex-flow：row wrap；

（三）flex布局子项常见属性
• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）

1、flex属性
定义子项目分配剩余空间，用flex来表示占多少份数
flex：number

2、align-self
控制子项自己再侧轴上的排列方式
alin-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则同等与stretch。

span:nth-child(2){align-self:flex-end}

3、order属性定义项目的排列顺序
数值越小，排列越前，默认为0.
注意：和z-index不一样。

四、rem设配布局

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

（二）媒体查询
Media Query是CSS3新语法。
• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度高度重新渲染页面
语法规范：
@media mediatype and|not|only (media feature){ CSS-Code }
◦ 用@media开头 注意符号@
◦ mediatype媒体查询
◦ 关键字and not noly
◦ media feature 媒体特性 必须有小括号包含

（三）less基础

1、维护css弊端
css是一门非程序语言，没有变量、函数、SCPOPE（作用域）等概念。
• CSS冗余严重
• 不方便维护
• 没有良好的计算能力

2、Less介绍
Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器。
less没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
less在css语法的基础上，引入变量，MiXin（混入），运算以及函数等功能，大大简化了css的编写，降低了css的维护成本，就如它的名称，less可以让我们用更少的代码做更多的事。
一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性。

3、Less使用
创建后缀名为less的文件，在这个文件里书写less语句。
1. Less变量
2. Less编译
3. Less嵌套
4. Less运算

3.1 Less变量
变量是指没有固定的指，可以改变的。
@变量名：值
规范：
• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

3.2、Less编译
less包含一套自定义的语法以及一个解析器，用户根据语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

3.3、Less嵌套
① 子元素的样式直接写到父元素里
② 【交集|伪类|伪元素选择器】
• 内层选择器前面没有&符号，则解析为父元素的后代；
• 如果有&符号，则为父元素自身的或父元素的伪类

3.3、Less运算
任何数字、颜色或者变量都可以参加运算，就是Less提供了加（+）、减（-）、乘（*）、除（、）算术运算。
注意：
• 乘号（*）和除号（/）的写法。
• 运算符中间左右有个空格隔开。
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位。
• 如果两个值之间只有一个值有单位，则运算结果就该取该单位。

4、rem设配方案
1. 首先我们选一套标准尺寸 750px为例
2. 我们用屏幕尺寸 除以 我们划分的份数 得到了html里面的文字大小 但是我们知道不同屏幕下得到的文字的大小是不一样的
3. 页面元素的rem值 = 页面元素在750像素下px值 / html里面的文字大小

五、响应式布局
响应式开发

（一）响应式布局容器
响应式布局需要一个父级元素作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式。
响应式布局尺寸划分
• 超小屏幕（手机，小于768px）：设置宽度为100%；
• 小屏幕（平板，大于等于768px）：设置宽度为750px；
• 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px；
• 大屏幕（大桌面显示器，大于1200px）：宽度设置为1170px；

（二）Bootstrap框架学习

1、Bootstrap简介
Bootstarp来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
中文官网：http://www.bootcss.com/
官网：http://getbootstarp.com/
推荐使用：http://bootstarp.css88.com/

1.1 框架
顾名思义就是一套架构，它有一套比较完整的网页解决方案，而且控制权在框架本身，有预制样式、组件和插件。使用者要按照框架所规定的某种规范进行开发。

1.2 标准化的html+css编码规范
提供一套整洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，他搞了开发的效率

2、使用
控制权在框架本身，使用者要按框架所规定的某种规范进行开发
Bootstarp使用四步曲：
1、创建文件夹结构；2、创建html骨架；3、引入相关文件；4、书写内容
★ 创建html骨架结构
 

<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 视口设置：视口宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<!--[if lt IE9]-->
			<!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<!-- 解决ie9以下浏览器对css3Media Query的不识别 -->
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->

3、布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.contatiner容器，Bootstrap预先定义好这个类，叫.contatiner,它提供了两个做此处用的类

3.1 container类
• 响应式布局容器 固定宽度
• 大屏（>=1200px）宽度定位1170px
• 中屏（>=992px）宽度定为970px
• 小屏（>=768px）宽度定为750px
• 超小屏（100%）

3.2 container-fluid类
• 流式布局容器 百分百宽度
• 占据全部视口（viewport）的容器
• 适合单独做移动开发