这周电脑坏了，重新买了个电脑，又遇上下大雪延迟发货，所以这几天都没学，只是电脑回来刚赶上的，见谅见谅
# 移动端常见布局
流式布局（百分比布局）
1. 也称非固定像素布局
2. 通过设置宽度为百分比来根据屏幕的宽度来伸缩，不受固定像素的限制，内容向两侧填充
3. 流式布局方式是移动web开发使用的比较常见的布局方式
# flex布局
1. 传统布局
-兼容性好
-布局繁琐
-局限性，不能在移动端很好的布局
2. flex弹性布局
-操作方便，布局极为简单，移动端应用很广泛
-PC端支持情况差
-IE11或更低，不支持
# flex布局原理
flex布局为弹性布局，用来为盒状模型提供最大灵活性，任何一个容器都可以指定为flex布局
-当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
-伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
flex布局的元素，称为flex容器，简称容器，它的所以子元素自动成为容器成员，简称项目
-体验中div就是flex父容器
-体验中span就是容器项目
-子容器可以横向排列也可以纵向排列
总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列位置
# 常见的父项属性
flex-direction：设置主轴的方向：
属性值：
row：默认值从左到右
row-revers：从右到左
column：从上到下，
column：从下到上
justify-content：设置主轴上的子元素排列方式：
属性值：
flex-start：默认从头部开始，主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐（如果主轴是x轴则水平居中）
space-around：平分剩余空间
sapce-between：先两边贴边，在平分剩余空间
flex-wrap：设置子元素是否换行：
属性值：
nowrap：不换行
wrap：huanhang
align-content：设置侧轴上的子元素排列方式（多行）：
属性值：
flex-start：从上到下
flex-end：从下到上
center：垂直居中
stretch：拉伸（默认值）
align-items：设置侧轴上的子元素排列方式（单行）
属性值：
flex-start：从上到下
flex-end：从下到上
center：垂直居中
stretch：拉伸（默认值）
flex-flow：复合属性（flex-direction，flex-wrap）
主轴和侧轴：
主轴：x轴方向，水平向右
侧轴： y轴方向，水平向下
# flex属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份
align-self和order
align-self控制子项自己在侧轴上的排列方式：
它的属性允许单个项目有与其他项目不同的对齐方式，可覆盖align-items，默认为auto，表示继承父元素align-item的，没有父元素则等同于stretch
# rem单位
rem(root em)是一个相对单位，类似于em，em是父元素字体大小。
rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size: 12px; 非根元素设置width: 2rem; 则换算为px表示24px。
# 媒体查询
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的 屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询
1. 语法规范
2. 关键字
关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件。
and ：可以将多个媒体特性链接到一起，相当于“且”的意思。
not ：排除某个媒体类型，相当于“非”的意思，可以省略。
only ：指定某个特定的媒体类型，可以省略
3. 媒体特性
实现的思路：
1. 按照从大到小或者从小到大的思路
2. 注意我们有最大值max-width和最小值min-width都是包含等于的
3. 当屏幕小于540像素，背景颜色为蓝色（x<=539）
4. 当屏幕大于等于540像素并且小于等于969像素的时候背景为绿色
5. 当屏幕大于等于970像素时背景为红色
# 媒体查询引入资源
当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）。
原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。
# less的基础
维护css的弊端：
CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
- CSS需要书写大量看似没有逻辑的代码，冗余度比较高。
- 不方便维护及扩展，不利于复用。
- CSS没有很好的计算能力。
- 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS项目。
less介绍：
Less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也称为CSS预处理器。
作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mixin（混入）,运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，用更少的代码做更多的事。
Less中文网址 ：http://lesscss.cn/
常见的CSS预处理器 ：Sass、Less、Stylus
一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性
less变量：
变量是指没有固定的值，可以改变。因为CSS中的一些颜色和数值经常使用。
@变量名: 值;
要求：
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
less编译：
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。
Easy LESS 插件用来把less文件编译为css文件，只要保存一下less文件，就会自动生成CSS文件。
less嵌套：
如果遇见（交集、伪类、伪元素选择器）
- 内层选择器的前面没有&符号，则它被解析为父元素选择器的后代；
- 如果有&符号，它就被解析为父元素自身或父元素的伪类。
less运算：
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算数运算。
注意：
- 乘号（*）和除号（/）的写法
- 运算符中间左右有个空格隔开，1px + 5
- 对于两个不同单位之间的运算，运算结果的值取第一个值的单位
- 如果每两个值之间只有一个值有单位，则运算结果就取该单位
# rem适配方案
1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2. 使用媒体查询根据不同的设备按比例设置html的字体大小，然后页面元素使用rem尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。
# 实际开发方案
1. 按照设计稿与设备宽度的比例，动态计算html根标签的font-size大小；（媒体查询）
2. CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；
rem适配方案技术使用：
1. less 媒体查询 rem
2. flexible.js rem
总结：
1. 两种方案现在都存在
2. 方案2更简单，但不用了解js代码
适配方案一：
注：一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏，牺牲一些效果。
动态设置html标签font-size大小：
1. 假如设计稿是750px
2. 假如我们能把这个屏幕划分为15等份
3. 每一份作为html字体大小，这里就是50px
4. 在320px设备中，字体大小为320/15就是21.33px
5. 用我们页面元素的大小除以不同的htnl字体大小就会发现它们的比例是相同的
6. 比如我们以750px为标准的设计稿
7. 一个100 * 100像素的页面在750px屏幕下，就是100/50转换为rem，是2rem * 2rem，比例是1比1
8. 320px屏幕下，html字体大小为21.33，则2rem=42.66px，此时宽和高都是42.66，但是宽和高的比例还是1比1
9. 实现不同屏幕下，页面元素盒子等比例缩放的效果
元素大小取值方法：
1. 最后的公式：页面的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
2. 屏幕的宽度/划分的份数 就是html font-size的大小
3. 或者：页面元素的rem值=页面元素/html font-size
适配方案二：
简洁高效的rem适配方案flexible.js
手机淘宝团队出的简洁高效移动端适配库。
我们不需要再写不同屏幕的媒体查询，因为里面js做了处理。
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好当前设备的html文字大小就可以了。
比如当前设计稿是750px那么我们只需要把html文字大小设置为75px（750px/10）就可以了。
里面页面元素rem值：页面元素的px值/75。
剩余的，让flexible.js去计算。
github地址：https://github.com/amfe/lib-flexible
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
