CSS3響應式佈局

CSS3響應式佈局

 

1、media-Css3響應式　

　　媒體類型:

　　　　all 全部媒體

　　　　screen 彩屏設備

　　　　print 用於打印機和打印預覽

　　　　speech 應用於屏幕閱讀器等發聲設備

　　　　braille 應用於盲文觸摸式（已廢棄 ）

　　　　embossed 用於打印的盲人印刷設備（已廢棄 ）

　　　　projection 用於投影設備（已廢棄 ）

　　　　tty 不適用像素的設備（已廢棄 ）

　　　　tv 電視（已廢棄 ）

　　關鍵字:

　　　　and not 用來排除某種制定的媒體類型

　　　　only (限定某種設備)某種特定的媒體類型

　　媒體特性:

　　　　(width:600px) 寬

　　　　(max-width:600px) 最大寬度 <=600

　　　　(min-width: 480px) 最小寬度 >=480

　　　　(orientation:portrait) 豎屏

　　　　(orientation:landscape) 橫屏

2、Css3響應式佈局

　　方式一：媒體查詢：@media [not|only] mediatype [and] (media feature) { CSS-Code; }

　　　　例： @media screen and (min-width:400px) and (max-width:500px) { .box {margin: 0 auto;} }

　　　　　　//值與值之間須要有空格，and先後也要有空格

　　方式二：@import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature); 需頂行寫

　　　　例：@import url("css/reset.css") screen;

　　方式三：樣式引入

　　　　<link rel="stylesheet" type="text/css" href="print.css" media="print" />

　　　　<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 800px)">

　　　　<link rel="stylesheet" type="text/css" href="B.css" media="screen and (min-width: 600px) and (max-width: 800px)">

　　　　<link rel="stylesheet" type="text/css" href="C.css" media="screen and (max-width:600px)">

　　　　<link rel="stylesheet" type="text/css" media=」all and (orientation:portrait)」 href=」portrait.css」>

　　　　<link rel="stylesheet" type="text/css" media=」all and (orientation:landscape)」href=」landscape.css」>

3、viewport-Css3響應式　

　　<meta name="viewport" content="" />

　　　　視口的做用：在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備這麼大，而後展現

　　　　width [pixel_value | device-width]       例如:  width = 640

　　　　height [pixel_value | device-height]

　　　　initial-scale 初始比例

　　　　minimum-scale 容許縮放的最小比例

　　　　maximum-scale 容許縮放的最大比例

　　　　user-scalable 是否容許縮放 （yes || no 或 1 | 0）

　　　　target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

　　<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　　　此屬性爲文檔兼容模式聲明，表示若是在IE瀏覽器下則使用最新的標準渲染當前文檔

　　　　emmet快捷鍵：meta:compat