响应式布局

1.查看理想视口(viewport)：window.screen.width
2.布局视口:使PC页面在移动端上查看布局不混乱Document.documentElement.clientWidth
3.视觉视口：肉眼可见的视觉区域
viewport标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

使布局视口改变为手机对应的布局视口


width设置具体数据时，超出部分生成横向滚动条
width=device-width：为理想视口的宽度

initial-scale：改变布局视口大小（页面缩放），元素的大小不变

媒介查询：

媒体顺序查询：离元素最近的规则为准（覆盖）
注意！！！！查询匹配的顺序 考虑使用相对单位来做媒体特性单位

左浮动：元素离开常规流 并显示在它父元素内边距区域的左边

浮动

POSITION:RELATIVE

去除定位：

可以使用top left right bottom控制位置，注意relative位置还存在！

FLEX：



2.重点：父容器 子容器

Flex-wrap：换行（默认挤满元素再换行）
Justify-content：子元素在主轴上的对齐方式（flex-star是对齐到主轴的开始位置）space-around（间距等分）

pace-between（两边不留空间 中间平分）

Align-items：交叉轴（侧轴对齐方式）单行情况下
如果设置Justify-content&Align-items为center则可以实现垂直居中
Align-content: 多行情况下

子组件：
Order：控制子组件排序的次序
Flex-grow：占据的比例（不能超过同行其他元素规定的大小）
Flex-shrink：当剩余空间不足的时候，不换行的前提下，设置子组件占据的比列
flex-basis：跟width同理，剩余空间分配基准值
Align-self：可以覆盖父元素对其的控制，自己定义对齐方式

使用flex-direction的时候，justify-content:flex-end和start方向也被调转
注意当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。横方向相反

以使用的控制单个元素的属性是align-self。这个属性接受和align-items一样的那些值。

flex-wrap: • nowrap: 所有的元素都在一行。

• wrap: 元素自动换成多行。
• wrap-reverse: 元素自动换成逆序的多行。

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap去设置行并自动换行

以使用align-content来决定行与行之间隔多远。这个属性接受这些值：

• flex-start: 多行都集中在顶部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行与行之间保持相等距离。
• space-around: 每行的周围保持相等距离。
• stretch: 每一行都被拉伸以填满容器。

这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

栅格系统：

flexible：

1.绝对尺寸单位：cm mm q in py pc px
2.相对字体的尺寸单位：em（父元素） ex ch rem（根节点）
3.视口百分比单位：vw vh vmin vmax

更精准健壮的换算：

<script>
    var width = document.documentElement.clientWidth;
    var radio = width/7.5;
    document.documentElement.style.fontSize = radio + 'px';
</script>

<!--75px=1rem-->
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

<16px=1rem>
html{
    font-size: 16px;
}

移动web前端meta通用设置

<!-- 页面字符编码 -->
<meta charset="utf-8">

<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- 关键字描述 -->
<meta name="keywords" content="">
<meta name="description" content="">

<!-- 设置移动端视图 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">