響應式佈局

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">