Media Query-響應式布局
阿新 • • 發佈：2018-08-21
網站 style http log scree 例如 ava -c pri
做響應式網站的時候，一定要在頁面頭部加入如下的聲明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
width=device-width 樣式中定義的寬度等於設備中定義的寬度
initial-scale=1.0 縮放比例1
minimum-scale=1.0 最大縮小比例1
maximum-scale=1.0 最大放大比例1
上段代碼的最終作用是，移動客戶端會按你設定的尺寸來顯示頁面。並且比例是1，不可通過手勢放大縮小。 如果不寫這段代碼，移動客戶端的瀏覽器真的會以它的1px來顯示你設定的1px。最終效果是被縮放的效果，字小小的那種。 總之，做響應式網站的時候記得至少要加上如下聲明。
什麽是Media Query？
CSS2允許用戶對特定media類型制定樣式。
例如： 針對screen（屏幕）用 @media screen{ ... }裏設定的樣式。 針對打印樣式用 @media print{ ... } 裏的樣式。
CSS3提供了更加強大的功能。 可以針對不同media類型設置樣式，還根據設定的寬度或者高度指定樣式。
@media screen and (max-width: 500px) {
body { background-color: black; }
}
意思就是： 當屏幕的寬度小於等於500px的時候body的背景顏色為黑色。
相關英語
viewport = 視口
content = 內容
device-width = 設備寬度
initial-scale = 初始-比例
minimum-scale = 最小-比例
maximum-scale = 最大-比例
media = 媒體
query = 查詢
僅供學習參考，原文鏈接：https://www.cnblogs.com/luoruiyuan/articles/5482042.html
Media Query-響應式布局