響應式佈局@media only screen and 解釋以及demo
阿新 • • 發佈：2018-12-23
only(限定某種裝置)
screen 是媒體型別裡的一種
and 被稱為關鍵字，其他關鍵字還包括 not(排除某種裝置)
/* 常用型別 */
型別 解釋
all 所有裝置
braille 盲文
embossed 盲文列印
handheld 手持裝置
print 文件列印或列印預覽模式
projection 專案演示，比如幻燈
screen 彩色電腦螢幕
speech 演講
tty 固定字母間距的網格的媒體，比如電傳打字機
tv 電視
screen一般用的比較多，下面是我自己的嘗試，列出常用的裝置的尺寸，然後給頁面分了幾個尺寸的版本。
/* 常用裝置 */
裝置 螢幕尺寸
顯示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960
兩種方式
No.1<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是當螢幕的寬度大於600小於800時，應用styleB.css
No.2
@media screen and (max-width: 600px) {
/當螢幕尺寸小於600px時，應用下面的CSS樣式/
.class { background: #ccc; }
}
<meta name="viewport" content="width=device-width, initial-scale=1"/>
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> @media screen and (min-width: 1200px) { body{ background-color: antiquewhite; } p{ width: 1200px; background-color: sienna; } } @media screen and (min-width: 500px) and (max-width: 1023px){ body{ background-color: aqua; } p{ width: 960px; background-color: cadetblue; } } </style> <body> <p>響應式效果</p> </body> </html>
在谷歌瀏覽器中用開發者工具拉動螢幕會發現出現不同效果！