1，兼容性问题：
支持兼容考虑webkit就可；
常见移动端的屏幕尺寸，分辨率；
像素比
2，移动端的调试：
右键edit--横竖屏的切换--
视口:
定义：浏览器显示内容的屏幕区域，
分类：布局视口，视觉视口，理想视口
整个网页的版心，用户正在看到的网站区域，不用缩放可以看到的网页内容
操作：
3，meta视口标签，设置布局视口与理想视口相同
< meta nsmr>
视口宽度与设备宽度保持一致；
4，物理像素与物理像素比
定义：1，正式存在的像素颗粒；
2，像素在移动端一个像素在移动端成倍数关系；例如：inphone8;电脑端1px在移动端为2个物理像素；
因此顶部的像素显示的为真实手机显示区域的一般大小
视网膜频幕：将物理像素点更多放置入一块屏幕里，清晰度更高，表示更加细腻；
5，二倍图：（多倍图）
原理，插入的图片比实际需要的图片大二倍（多倍）；
width，height手动缩小，清晰度更高；
6，移动端调整背景图片的大小：background-size:
属性：
cover ：宽高等比缩放，全部覆盖盒子，部分背景显示不全；
contain:宽度高度等比拉升，盒子填充不满；
百分比：相对于父盒子
精确像素：1个参数：（宽度）
2个参数：宽度，高度；图片会被拉伸；
使用场景：盒子内插入背景图片调整大小；
7，移动端开发选择：
单独制作移动端页面（主流）；以及响应式页面的两种方案;
h5,c3的新样式移动端几乎都支持，有问题的可以通过-webkit-来解决（移动端的内核）
8，移动端初始化样式：
normalize.css
9,css3盒子新模型：
box-sizing(怪异盒子模型，border-box（怪异）/content-box(传统))
10，移动端的特殊样式：
css3盒子模型：box-sizing:border-box;
-webkit-box-sizing:border-box;
高亮的取消：-webkit-tab-highlight-color:transparent;
(手机端点击超链接时自动显示的高亮颜色)
移动端浏览器默认外观在ios上加此属性给按钮和输入框自定义样式(去掉默认的亮光样式)：
-webkit-appearance:none;
禁用长按页面弹出菜单：
img,a{-webkit-touch-callout:none;}
11，移动端常见布局：
11.1 流式布局：
定义：百分比布局,非固定像素布局，不受固定像素的限制，内容两侧填充，根据屏幕的宽度进行伸缩；（常见布局）
特点：通常width用百分比，hight依旧可以设置像素；
最大最小值保护：例子（max-width:980px;min-width:320px;）
12.2 flex布局属性：
pc端浏览器支持情况较差，操作布局方便，ie11及更低版本不支持
特点：
flex中没有严格区分行内块；行内元素也可以直接设置宽高。
所有类型的元素都可以使用
float/clear/vertical-align属性失效
display；flex;添加给父亲盒子；
布局原理：（弹性布局）
常见属性；
flex-direction:row(默认)/row-reverse/column设置主轴x的正方向-----------------侧轴y向下的正方向；
元素跟着主轴排列
column;设置y轴为主轴；
justify-content:center;flex-start;flex-end;flex-space-around;space-between
子元素当中，一行显示，排不下的部分会修改子盒子的大小
默认子元素不换行，
flex-wrap:nowrap(默认)/no(另起一行);
align-items:flex-start/flex-end/center/stretch(拉升，子盒子需要取消高度，) 设置侧轴的对齐方式
1，给父盒子添加该属性：
display:flex;2,主轴：
2.1设置主轴方向：
flex-direction：row (默认 左至右)；
row-reverse (右至左)；
column (上到下)；
colmun-reverse (下到上)；注释：reverse中不仅右至左而且子盒子倒序；
2.2设置主轴上子元素排列方式：
justify-content:flex-start; (默认从头部开始，左至右/上至下)
flex-end; (从尾部开始排列)
center； (主轴居中对齐，水平居中/垂直居中)
space-around; (平分剩余空间)
space-between; (先两边贴边，再平分剩余空间)注释：此处子盒子不会倒顺序；
pace-around子盒子之间的缝隙大于首位，缘由父盒子是由padding-left/right一起均分的；
2.3设置子元素是否换行（默认不换）：
flex-wrap:nowrap; (不换行)
wrap; (换行)3,侧轴：
2.1设置侧轴上的子元素排列方式：
2.1.1单行：
align-items:flex-start;
flex-end;
center;
stretch;
注释：目前设置侧轴时通常也有主轴的存在；
2.1.2多行：()
align-content:flex-start;
(默认y轴从侧轴头部开始，左至右/上至下，只能用于子项出现换行的情况（多行），在单行下是没有效果的)
flex-end; (从侧轴尾部开始排列)
center; (侧轴居中对齐，水平居中/垂直居中)
space-around; (平分剩余空间)
space-between; (先两边贴边，再平分剩余空间)
stretch; (拉伸，沿着侧轴拉变形，子盒子需要取消高度) 注释：必须换行；flex-wrap:wrap;
并且单行情况下没有效果
2.1.3区别：
单行找align-items
多行找align-content 易错：竖着的一列，也是单行，只是使用只是使用flex-direction:column;将其竖排列罢了。
2.1.4侧轴的单独控制：
align-self:flex-end/flex-start;注释：此处是添加给单独行动的子盒子；align-items:flex-end;添加给的是父亲盒子；
order:-1;调换的左右效果默认为0，z-index:是调换层次关系；
4,flex-direction与flex-wrap的复合属性：
flex-flow：column wrap;5，flex属性；
定义子项目分配剩余空间，用flex占多少份数。
记住父盒子依旧需要display:flex;flex：number;加给定义份数的盒子原理：左右盒子的宽度固定，中间按照规划的份数分；
特点：自由拉伸，灵活缩放；
12，使用技巧总结：
12.1单盒居中：(对父盒子添加：)（子盒子为块级，行内块，行内均可使用）
display: flex;
justify-content:center;
align-items: center;12.2多盒行居中：
display:flex;
justify-content:center/space-between/space-around;
align-items:center;12.3多盒列居中：
display:flex;
flex-direction:column;
justify-content:center;13 ，rem布局
特点： 页面布局文字字体大小的跟随缩放；
屏幕发生变化时元素的宽高跟随变化；
流式布局和flex布局主要针对宽度；
1，基础
概念：rem（root em）是相对于html的文字大小的单位，类似于em相对于父元素的字体大小
rem整体控制；根据html{font-size:12px}来变化；
优势：通过修改html里面的文字大小来控制元素如div盒子的大小；
总结：1rem对于盒子的宽高的大小等价于设置的html的px（如：下方的18px);
html{
font-size: 18px;
}
.box{
width: 10rem;
height: 10rem;
background-color: pink;
}
.box2{
width: 180px;
height: 180px;
background-color: purple;
}
14，媒体查询
14.1不同屏幕尺寸
Media Query:针对不同屏幕尺寸设置不同的样式；
使用场景：页面中多个地方使用rem作为单位布局，在不同屏幕下修改html的字体大小，那么整个页面都会同步变化。
@Media mediatype and/not/only (media feature){css-code}关键字：and/连接 not/排除 only/
媒体特性：width (输出设备可见宽度)/ min-width(...最小可见区) / max-width(...最大)
媒体类型：
all （所有设备）/ print （打印机、打印预览）/ screen(电脑屏幕,平板电脑,smartphone)
语法：
@media screen and (max-width:800px)
{
body {
background-color: pink;
}
}注释：含义--最大值<=800px;，注意此处含等，若不包含需要手动-1px;
单位不能省略
代码的简化；（代码按照从小到大，代码会更加的简洁，利用代码的层叠性）
14.2 媒体查询引入资源：
更具不同的尺寸大小，引用不同的页面样式；
语法规范：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
推荐：从小到大，
15，Less基础：
1,css弊端：
代码没有逻辑代码；css冗余度高
不方便维护以及扩展，不利于复用
没有计算能力，比如二倍图之间倍数的转换
前端人员缺少经验导致css代码的产出组织不够优越，不易维护
2，Less介绍：
css的扩展语言，css预处理器；
后缀.less
3，Less基础：http://lesscss.cn/
变量：（将常用的参数定义到变量当中）
命名规范：
必须有@为前缀，不能包含特殊字符，不能以数字开头，大小写敏感
语法：
@变量命：值；//@color:deeppink;
16，响应式布局：
原理：媒体查询，正对不同宽度的设备进行布局样式的设置；从而适配
1，布局容器：container
两侧有空隙--美观
栅格系统类前缀：
