前端（流式布局和flex布局）

谷歌模拟手机调试
1**.视口（viewport）：**屏幕区域
布局视口、视觉视口、理想视口
1）布局视口（layout viewport）
ios，安卓 980px
不适合
2）视觉视口visual viewport
3）理想视口ideal viewport
需要手写填写视口标签同之浏览器操作
对设备最理想的视口，乔布斯

2、meta视口标签

3.物理像素和px
pc端，1个px等于一个物理像素；
iphone8 1个px等于两个物理像素。
视网膜屏幕，将更多的物理像素点压缩，更加高清

4、背景缩放
background-size: 50%
background-size: 500px 300px(宽度 高度)
background-size: cover
background-size: contain

5.多倍图切图cutterman

6、移动端开发
1）单独制作移动端（主流）
在网址域名前加m可以打开移动端页面m.jingdong.com
2）响应式兼容px移动端 例如：三星

7、移动端浏览器基本以webkit
css初始化 normalize.css
传统的css
css3盒子模型

8、布局
单独制作移动页面
1）流式布局
2）flex弹性布局
3）less+rem+媒体查询布局
4）混合布局
响应式页面
1）媒体查询
2）bootstarp

**9、流式布局（百分比布局）**或称非固定 像素布局

10、flex布局
1）操作方便，布局极为简单，应用广泛
2）PC端浏览器支持情况较差
3）IE 11或耕地版本，不支持或部分支持

display:flex;

11、flex布局原理
任何一个容器都可以指定为flex布局
可以使盒子居中垂直
flex容器，他的所有子元素自动成为容器成员。默认横着排
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

父项属性
1）flex-direction设置主轴

2）justify-content设置主轴上的子元素排列方式

3)flex-wrap设置子元素是否换行
默认情况下，子元素不换行；如果装不下会缩小子元素的宽度

4）align-items设置侧轴上的子元素排列方式（单行）
align-items:center;
align-items:flex-start;//沿侧轴从上到下
align-items:strench//沿侧轴延申;

5）align-content设置侧轴上子元素的排列方式（多行），在单行下无效。

6）flex-flow属性时flex- direction和flex-wrap的复合属性

flex-flow:row wrap;

子项属性
flex属性定义子项目分配剩余时间，用flex来表示占多少份数。
（中间自适应）

.itm{
flex:;/*default 0*/
}

可设置一个盒子的位置

align-self:flex-end;

order:-1/默认是0/