今日学习内容
视口和多倍图
视口概念
视口就是浏览器页面显示内容的屏幕区域，视口可分为：布局视口、视觉视口、理想视口
理想视口
为了使网站在移动端有最理想的浏览和阅读宽度而设定的，对于设备来说，理想视口是最理想的视口尺寸
需要手动来添加meta标签进行视口的设置
meta标签的主要目的：布局视口和理想视口的宽度一致，简单来说就是设备有多宽布局视口就有多宽
视觉视口
是指用户正在看到的网站的区域，注意，是正在看到的网站的区域，可以通过缩放去操作视觉视口里能看到的内容，但不会影响布局视口，布局视口仍然采用原来的宽度。
布局视口
一般移动端的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题，iOS和安卓一般都将这个视口设置为980px，所以PC端页面大多数都能在手机上呈现，但是元素会看上去很小，一般可以通过手机对网页进行缩放
meta标签
name=“viewport” 声明设置视口的meta标签
width 宽度设置的是viewport的宽度，设置为device-width特殊值时，就是让页面宽度和设备宽度保持一致
initial-scale 初始缩放比，可以设置成大于0的数字，一般会设置为1.0 代表初始缩放比是1（没有缩放
maximum-scale 最大的缩放比，可以设置成大于0的数字，一般我们会将其设置为1.0 代表最大缩放比例为1
minimum-scale 最小的缩放比，可以设置成大于0的数字，一般我们会将其设置为1.0 代表最小缩放比例为1
user-scalable 是否允许用户进行缩放，值可以设置为yes或者no （1或者0）
物理像素和物理像素比
物理像素点指的是屏幕的最小颗粒，是真实的物理存在，在设备出厂的时候就设置好的，比如苹果6的 750*1334。
我们开发时候的1px的像素单位 不一定是等于1个物理像素
一个px的能显示的物理像素点的个数，就叫做物理像素比或者屏幕像素比
多倍图
对于一张50px * 50px的图片，在移动端中打开，按照刚才的物理像素比会进行图片的放大，这样会造成图片模糊的结果
通常我们使用多倍图来提高图片质量
使用多倍图时，需要关注物理像素比，物理像素比是多少就使用相应的倍数来对图片进行缩放，比如iphone6的物理像素比是2，那么我们会将图片缩小两倍后放到移动端展示
二倍精灵图的使用
将图片缩小2倍后进行背景图片插入，然后在缩小后的图片上进行像素值的测量，进行背景图片位置的改变
移动端开发的选择和技术方案
移动端的主流方案
单独制作移动端网页
通常情况下，移动端的网址前面都是m开头的
当我们使用移动端打开网页时，页面会自动识别我们的移动设备来匹配相应的移动端网页
pc端是一套单独的网页，移动端是另一套单独的网页
响应式的方式制作网页
PC端和移动端公用一套网站，在不同屏幕下进行不同样式匹配
浏览器的兼容问题
移动端的浏览器基本都是以webkit内核为主，我们主要考虑webkit的兼容性即可
移动端里可以放心的使用html5和css3的样式
同时我们的浏览器的私有前缀只需考虑添加webkit即可
移动端的公共样式文件
使用normalize来进行移动端的样式初始化
移动端的常见布局
移动端单独制作
流式布局（百分比布局）
flex弹性布局
less+rem媒体查询进行布局
混合布局
响应式
媒体查询
bootstrap响应式框架
流式布局
流式布局即百分比布局，也叫非固定像素布局
通过盒子的宽度设置百分比的方式来根据屏幕的宽度进行伸缩，不受固定像素的限制。
flex布局
flex布局和传统布局相比
传统布局：兼容性比较好，布局比较繁琐，局限性，在移动端布局的效率不高
flex布局：操作比较方便，布局很简单，移动端应用非常广泛，pc端的浏览器支持不是很好，ie11或者更低版本的浏览器不支持flex
如果pc端页面布局不考虑兼容性或者移动端可以大量的使用flex布局，如果要考虑兼容性，建议选择传统布局方式。
flex布局原理
Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供大量的灵活性，任何一个容器都可以指定为flex布局
当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效
采用flex布局的元素称为Flex容器（flex container），简称“容器”。 它里面的所有的子元素自动称为容器的成员，称为Flex项目（Flex item），简称“项目”。
核心：通过给父元素添加flex属性来控制子盒子的排列方式
flex布局父项常见属性
flex-direction 设置主轴方向
flex-direction: row;
将x轴当做主轴，所有子元素从左到右依次排列
flex-direction: row-reverse
将x轴当做主轴，所有子元素沿着x轴从右到左进行排列
flex-direction: column;
将y轴当做主轴对待，所有子元素从上到下进行排列
flex-direction: column-reverse;
将y轴当做主轴对待，所有子元素从下到上进行排列
justify-content 设置主轴上子元素的排列方式
justify-content: flex-start;
默认值： 从头部开始，如果主轴是X轴就是从左到右，如果主轴是Y轴就是从上到下
justify-content: flex-end;
从尾部开始排列
justify-content: center;
所有子元素沿主轴进行居中对齐
justify-content: space-around;
所有子元素平分主轴上的剩余空间
justify-content: space-between;
先让边缘的两个元素贴边，然后其他的元素再平分剩余的空间
flex-wrap 设置子元素是否换行
flex-wrap: nowrap;
默认值：不换行
flex-wrap: wrap;
让子元素自动换行
align-items 设置侧轴上子元素的排列方式（单行）
align-items: flex-start;
从侧轴的头部开始排列
align-items: flex-end;
从侧轴的底部开始排列
align-items: center;
让子项沿侧轴居中
align-items: stretch;
将子项拉伸到和父级一样的高度（前提是子项不能有高度
align-content 设置侧轴上的子元素的排列方式（多行）
align-content: flex-start;
沿侧轴的顶部开始排列
align-content: flex-end;
在侧轴的底部开始排列
align-content: center;
让所有的子项侧轴居中排列
align-content: space-around;
子项沿侧轴平分剩余空间
align-content: space-between;
子项两侧先贴边，然后再平分剩余空间
align-content: stretch;
设置子项元素高度平分父元素的高度(前提是子项不能设置高度)
flex-flow 是flex-direction 和 flex-wrap的复合属性
flex-flow: column wrap;
可以同时控制主轴方向和是否换行
flex布局子项常见属性
flex子项占的份数
给子项直接设置flex:1; 每一个子项就可以平分父项的空间了
如果父元素中有一个子项有自己的宽高，那么就是在该子项宽高占用的空间后的剩余空间内 其他子项在平分空间
align-self控制子项自己在侧轴上的排列方式
单独控制某一个子项的排列方式，可以覆盖align-items属性
order属性来定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认值为0
|
