瀏覽器中用于呈現網頁的區域叫視口（viewport）。視口通常并不等于屏幕大小（用戶可以縮放）。 ``` //按照設備寬度來渲染頁面 <meta name="viewport" content="width=device-width"/> ``` ``` //圖片隨屏幕寬度的改變而自適應 img { max-width: 100%; height: auto; } ``` ``` //媒體查詢 @media screen and (min-width: 50em) { /*樣式*/ } //not具有最高優先級 <link rel="stylesheet" media="not screen and (orientation: portrait) and (min-width: 800px)" href="xxx.css"/> //盡量不要使用@import，這會增加http請求 <style> @import url("xxx.css") screen and (max-width: 360px); </style> //針對高分辨率的媒體查詢 //2dppx：每個像素有兩個像素點 @media (min-resolution: 2dppx) ``` link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。除了@media之外，剩下的兩種適配方式均會將所有css文件下載，然后才根據屏幕大小做適配。 ``` //手機瀏覽器以百分百的視口寬度渲染頁面，把內容放大為實際大小，禁止用戶縮放 <media name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> ``` css3選擇符 ``` //匹配標簽和屬性 img[alt] {} img[alt="message"] {} img[alt^="mes"] {} //以xxx開頭 img[alt$="age"] {} //以xxx結尾 img[alt*="ss"] {} //包含xxx（xxx是字符串，注意和~=的區別） [data-file^="file"] {} //只匹配屬性 [title=qinchuan] {} //包含qinchuan這個單詞，qinchuan必須是一個完整的單詞 ``` ``` div:last-child {} div:first-child {} div:nth-child(odd\even\n(從1開始)) {} div:nth-last-child(n) {} //從倒數第n個開始往后匹配 ``` ``` div:not(.not-me) {} //div中沒有.not-me類的元素的樣式 div:empty {} //內容為空時的樣式 p:first-line {} //第一行樣式 ``` * vw：視口寬度 * vh：視口高度 * vmin：min(vw, vh) * vmax：max(vw, vh) 盡量避免使用css3中的濾鏡，它會影響渲染性能。 建議從最小的屏幕尺寸開始設計，漸漸地使視口尺寸增大。 從選擇支持的瀏覽器中選取共有子集開始編寫代碼（html、css、js），然后逐步優化代碼以適應那些比較強大的瀏覽器和設備，這就是漸進增強。平穩退化正好與之相反。一般情況下都是漸進增強的開發方式。 ``` input { appearance: none; } //清除表單元素在瀏覽中的默認樣式 ```