前端開發響應式設計之媒體查詢(bootstrap)
阿新 • • 發佈:2018-12-09
媒體查詢就是可以根據裝置顯示器的特性(視口寬度、螢幕比例、裝置方向-橫向或者豎向等)為其設定CSS樣式
為什麼響應式設計需要媒體查詢?因為沒有CSS3的媒體查詢模組,就不能針對裝置特性(尤其是視口寬度)設定特定的CSS樣式
bootstrap.css檔案最後的若干行,就是有關媒體查詢的程式碼,先暫時不看他的原始碼,看下面的簡單的css示例程式碼:
body { background-color: white; } @media screen and (max-width: 960px){ body { background-color: red; } } @media screen and (max-width: 768px){ body { background-color: yellow; } } @media screen and (max-width: 550px){ body { background-color: green; } } @media screen and (max-width: 320px){ body { background-color: blue; } }
給元素body定義了背景顏色白色,媒體查詢檢視當前是否是顯示器screen,判斷正確之後,再去檢視當前screen的大小,根據不同的大小覆蓋當前body背景顏色
上面的程式碼就是仿照bootstrap寫的CSS3檔案
媒體查詢只有CSS3才有麼,其實CSS2的時候就有這個了
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
通過匯入link標籤,媒體查詢進行判斷,如果當前裝置是顯示器,而不是印表機等其他的裝置,那麼就匯入screen.css檔案,這裡要注意media和href的順序,不要顛倒
之前有寫過將media判斷print印表機的情況,這樣如果是印表機,匯入相關css檔案,可以在列印的時候新增額外想新增的格式