響應式網站實踐原則
1.不管設備大小，應該包含相同內容
2.根據設備大小不同，顯示不同的內容
1.斷點的選擇
0-480 小屏幕
481-800 中屏幕
801-1400 大屏幕
1400+ 巨屏幕
<meta charset="UTF-8">的另一個好處，規范編碼，并且讓老版本瀏覽器標題識別中文
2.meta
<meta http-equiv="x-ua-comatible" content="ie=edge">
- 它代表ie文檔的兼容性，告訴文檔在ie下的兼容模式，
- 它是為了兼容一些在ie8下顯示不正常，但在老版本瀏覽器下顯示正常的模式
- 通過content 可以告訴 ie瀏覽器 你可以模擬 ie7的形式或者ie8或者ie9、ie11的形式顯示網頁
- 比如
content="IE=EmulateIE8"以ie8的模式渲染頁面 - ie=edge是為了強制ie瀏覽器以最新的模式渲染頁面，能多新，有多新，（但如果瀏覽器最高ie8，那也只能用ie8的模式渲染）。
3.響應式非常重要的標簽
<meta name="view-port" content="width=device-width,initial-scale=1">
以下內容待填補
4.對于ie低版本兼容
- css里 \0 大家都懂
- html里
<!--[if lte IE8]>
<p>如果瀏覽器小于等于ie8，那么我提示你該升級了</p>
<![endif]-->
- 格式不多說 gt 大于、lt小于、gte大于等于、lte小于等于
5.對于img引用
- 對于必不可少的img圖片 推薦用
<img>標簽形式嵌套進html里 - 對于可有可無的裝飾圖片放進css樣式里
6. px em rem
- px像素
- em 相對父元素 ，如果沒設會一直往上找，很強大但會導致混亂
- rem 相對html，但rem ie678不支持
html {
font-size: 62.5%;
color: #222;
}
如此一個rem會是10px
7.取消選中
css3屬性 順序不能亂，不然谷歌沒有，火狐有
::-moz-selection{
background-color: #b3d4fc;
text-shadow: none;
}
::selection{
background-color: #b3d4fc;
text-shadow: none;
}
8. 工具樣式
.center-block{
display: block;
margin-right: auto;
margin-left: auto;
}
.pull-right{
float:right !important;
}
.pull-left{
float:left !important;
}
.text-right{
text-align:right !important;
}
.text-left{
text-align:left !important;
}
.text-center{
text-align:center !important;
}
.hide{
display:none !important;
}
.show{
display: block !important;
}
.invisible{
visibility: hidden;
}
.text-hide{
font:0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
注意其中的text-hide 是為了隱藏文字，方便seo識別圖片
9.清除浮動
因為浮動可能導致父元素 高度塌陷
- 方法一
clear：both優點：通俗易懂 缺點：無意義的空div過多。這種方法基本拋棄。 - 方法二 給予容器
overflow:auto - 方法三 給予容器
float:left/right浮動，這樣它和它的子元素都在同一層，這樣也可以。 - 最推薦的辦法 通過css3偽類給一個看不見的塊狀元素設置clear：both
.clearfix:after{
content:'.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-- 為了ie6、ie7 基本上用不到 --*/
.clearfix{
zoom:1;
}
bfc注意，只要出發bfc就可以清楚浮動
而要生成BFC，目標元素的display為inline-block, table-cell, table-caption, flex, inline-flex中的一個，而inline-block會生成元素間隙，而有的支持性不好，最后在table-cell和table-caption綜合后選擇了display:table
所以有了最終版本，更優雅的方式清楚浮動
.clearfix:after{
content:" ";
display: table;
clear: both;
}
再稍微改進一下
.clearfix:after,.clearfix:before{
content:' ';
display: table;
}
.clearfix:after{
clear:both;
}
這種方法可以防止margin的疊加
10.學習細節知識
- chrome瀏覽器字體有個默認下限值，中文的是12px，所以在用rem設置行高的時候采取px更加精確
- 導航欄中間邊框新技能get
注意在chrome盒模型下，width不包括padding和marginheader .top ul li+li{ border-left: 1px solid #999; margin-left:-3px; } ``` 這種方法的好處，在li 設置inline-block時產生的空白符通過`margin-left：-3px`去除,并且li中間會有細線用作區分 - calc()計算 ```sh .feature .item{ width: calc(100%/3 - 3rem); }
所以，減去的值當為padding和margin的和 - before 利用
其中.notice a:first-child:before{ content: '最新公告：\00a0\00a0'; color: #aaa; }\00a0\00a0是不換行的空白字符,因為content沒法用 添加空格 - 文字不換行,多出省略
.notice a:first-child{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } - 用戶代理字符串在控制臺輸入
navigator.userAgent獲得相關設備信息 - 媒體查詢級別過高
@media only screen and (max-width:80rem){.......},媒體查詢的rem根據的不是html的字體大小，而是瀏覽器默認的字體大小
11.彈性圖片
響應式網站最早提出時，提出了 彈性布局 彈性圖片 媒體查詢
其中彈性圖片，能幫助用戶在移動設備上瀏覽時，瀏覽到相應的彈性圖片，而不是為pc端上設計的大圖片，讓用戶在相應設備有了更好的體驗才是彈性圖片的目的。
彈性圖片
加載與用戶設備相匹配的小圖片，既快速，又不會影響用戶的體驗。
需要2方面：圖片的排版和布局，根據設備大小加載相應圖片
解決方案：
- js或服務端(根據window大小設置地址)
- srcset配合sizes
- picture
- svg (兼容性好一點)
- srcset
- img設置為max-width:100%,圖片容器為100%
- picture
新增的html標簽，內含多個source，瀏覽器會自動遍歷選擇合適的條件
<picture>
<source media="(max-width:36rem)" srcset="one.jpg 768w"/>
<source media="(orientation: landscape)"/>
</picture>
orientation：portrait | landscape
取值：
portrait：指定輸出設備中的頁面可見區域高度大于或等于寬度
landscape：除portrait值情況外，都是landscape(一般橫屏)
說明：
定義輸出設備中的頁面可見區域高度是否大于或等于寬度。
本特性不接受min和max前綴。
主要推薦srcset，但srcset的兼容性問題，可以由picturefill.js解決
