一、移动端开发选择
1、移动端主流方案
a、单独制作移动端页面(主流): 包括京东商城手机版、淘宝触屏版、苏宁易购手机版等
b、响应式页面兼容移动端(其次): 三星手机官网
2、单独移动端页面(主流)
定义: 通常情况下，网址域名前面加m(mobile缩写)可以打开移动端。通过判断设备，如果是移动设备则跳转到移动端页面
3、响应式兼容PC移动端
定义: 通过判断屏幕宽度来改变样式，以适应不同终端
缺点: 制作麻烦，需要花费大量精力去调试兼容性问题
二、移动端技术解决方案
1、移动端浏览器
起因: 移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题
2、CSS初始化-normalize.css
官网地址: https://necolas.github.io/normalize.css/
优点:
· 保护了有价值的默认值
· 修复了浏览器的bug
· 模块化
· 拥有详细文档
3、CSS3盒子模型box-sizing
· 传统模式宽度计算: 盒子宽度 = CSS中设置的width + border + padding
· CSS3盒子模型: 盒子的宽度 = CSS中设置的宽度width里面包含了border和padding
也就是说， 我们的CSS3中的盒子模型，padding和border不会撑大盒子
注意:
· 移动端可以全部CSS3盒子模型
· PC端如果完全需要兼容，我们就用传统模式， 如果不考虑兼容，我们就选择CSS3盒子模型
4、特殊样式
三、 移动端常见布局
移动端技术选型
1、流式布局(百分比布局)
特点:
a、流式布局，就是百分比布局，也称非固定像素布局
b、通过盒子的宽度设置成百分比，根据屏幕的宽度来进行缩放，不受固定像素的限制，内容向两侧填充
c、流式布局方式是移动web开发使用的比较常见的布局方式
d、max-width: 最大宽度 max-height：最大高度
e、min-width：最小宽度min-height：最小高度
2、flex布局
传统布局与flex布局比较
建议:
如果是PC端页面布局， 我们还是用传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局， 我们使用flex弹性布局
2.1 布局原理
定义: flex是flexible Box的缩写，意为'弹性布局'，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
特点:
· 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
· 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用flex布局的元素，称为flex容器 (flex container),简称容器；它的所有子元素自动称为容器成员，称为flex项目(flex item)，简称项目。
· 如图6.2.1中的div就是flex父容器
· 如图6.2.1中的span就是子容器flex项目
· 子容器可以横向排列也可以纵向排列
图 6.2.1
2.2 父项常见属性
·flex-direction: 设置主轴的方向
定义: 在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有: 行和列、x轴和y轴
特点:
a,默认主轴方向及时x轴方向，水平向右
b,默认侧轴方向就是y轴方向，水平向下
属性值：flex-direction属性决定主轴的方向(即项目的排列方向)
注意: 主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的谁就是侧轴，而我们的子元素就是跟着主轴来排列的
· justify-content: 设置主轴上的子元素排列方式
注意: 使用这个属性之前一定要确定好主轴是哪个
· flex-wrap: 设置子元素是否换行
定义: 默认情况下,项目都排在一条线上，flex-wrap属性定义，flex布局中默认是不换行的，装不下会将子元素缩小
· align-content: 设置侧轴上的子元素的排列方式(多行)
定义: 设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况(多行)， 在单行下是没有效果的
· align-items: 设置侧轴上的子元素排列方式(单行)
定义: 该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项的时候使用
align-content和align-items区别
a，align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
b，align-content适用于换行(多行)情况下(单行情况下无效)，可以设置上对齐、下对齐、
居中、拉伸以及平均分配剩余空间等属性值
c,总结就是单行找align-items，多行找align-content
· flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
定义: flex-flow属性是flex-direction和flex-warp属性的复合属性
示例: flex-flow：row warp;
2.3 子项常见属性
· flex子项目占的份数
定义: flex属性定义子项目分配剩余空间， 用flex来表示占多少份数
语法:
.item {
flex: <number>; /* 默认为0 */
}
· align-self控制子项自己在侧轴的排列方式
定义: align-self属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
语法:
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式为在尾部排列*/
align-self: flex-end;
}
· order属性定义子项的排列顺序(前后顺序)
特点: 数值越小，排列越靠前，默认为0
注意: 和z-index不一样。z-index是沿着z轴排列，呈现里外层级
3、rem适配布局
3.1 rem基础
定义: rem(root em)是一个相对单位，类似于em，em是 父元素字体大小
不同的是rem的基准是相对于html元素的字体大小
比如,根元素(html)设置font-size: 12px; 非根元素设置width: 2rem；则换成px表示就是24px
优点: 可以通过修改html里面的文字大小来改变页面中元素的大小，而实现整体控制
3.2 媒体查询
定义: 媒体查询(Media Query)是CSS3新语法
特点:
a, 使用@media查询，可以针对不同的媒体类型定义不同的样式
b, @media可以针对不用的屏幕尺寸设置不同的样式
c, 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
d, 目前针对很多苹果手机、Android手机、平板灯设备都用得到多媒体查询
语法规范：
@media mediatype and|not|only (media feature) {
css-code; /* css 样式匹配代码 */
}
注意:
· 用@media开头，注意@f符号
· mediatype：媒体类型
· 关键字: and、not、only
· media feature: 媒体特性，必须有小括号包含
· screen后面的and必须带上，不能省略，且and后面必带空格
· 我们的数字后面必须跟单位,px不能省略(例如: max-width: 800px)
示例：
3.2.1 mediatype-查询类型
定义: 将不同的终端设备划分成不同的类型，称为媒体类型(all、print、screen)
3.2.2 关键字
定义: 关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
· and: 可以将多个媒体特性连接到一起，相当于'且'的意思
· not：排除某个媒体类型，相当于'非'的意思，可以省略
· only: 指定某个特定的媒体类型，可以省略
3.2.3 媒体特性
定义: 每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。注意它们都要加小括号包含
3.3 媒体查询 + rem实现元素动态大小变化
原理: rem单位是跟着html标签变化的，rem页面可以设置不同大小尺寸；媒体查询可以根据不同设备宽度来修改样式；媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化。
3.4 引入资源
原因: 当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets(样式表)
原理就是直接在link中判断设备的尺寸，然后引用不同的css文件
语法规范:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">示例:
3.5 css的弊端
弊端: CSS是一门非程序式语言，没有变量、函数、scope(作用域)等概念
特点:
a，CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
b，不方便维护及扩展，不利于复用
c，CSS没有很好的计算能力
d，非前端开发工程师来说，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
3.6 rem适配方案
1、让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
2、使用媒体查询根据不同设备按比例设置html的字体大小然后页面元素使用rem做尺寸单位,当html字体大小变化时,元素尺寸也会发生变化,从而达到等比例缩放的适配
rem实际开发适配方案
a、按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小(媒体查询)
b、CSS中.设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值
rem适配方案技术使用
1、less + 媒体查询 + rem
2、flexible + rem (推荐)
对比: 两种方案现在都存在;方案2要简单
4、响应式布局
4.1 开发原理
定义: 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
4.2 响应式布局容器
实现: 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理: 在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式修改
