移動web之媒體查詢及bootstrap的使用
ead>響應式佈局
作用:只寫一套程式碼,可以在PC端跟移動端執行
原理:根據螢幕的寬度不同,去使用不同的CSS(媒體查詢)
那響應式佈局是如何實現的呢?又能在開發中給我們帶來什麼便利呢?講到響應式佈局,需要先了解一下媒體查詢。因為響應式佈局的本質就是媒體查詢。
媒體查詢
1.1什麼是媒體查詢
- 媒體查詢( Media Query )是CSS3新語法。
- @media可以針對不同的螢幕尺寸設定不同的樣式
- @media可以針對不同的螢幕尺寸設定不同的樣式
- 當你重 置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機、Android手機 ,平板等裝置都用得到多媒體查詢
1.2為什麼要使用媒體查詢
當我們使用rem的時候,是通過設定html根標籤的字型fontsize來換算單位的。但是當螢幕尺寸發生變化時,html的根標籤字型大小不會主動跟著改變,需要我們使用其他的工具,實現html根標籤字型大小隨著螢幕尺寸的變化而變化。這個工具就是媒體查詢
1.3作用以及用法
- 手機螢幕大小不同,解析度不同, 如何設定不同的HTML標籤字號?
答:媒體查詢能夠檢測視口的寬度,然後編寫差異化的 CSS 樣式;當某個條件成立, 執行對應的CSS樣式
-
目標::能夠使用媒體查詢設定差異化CSS樣式
-
設定媒體查詢CSS的語法:
練習一:
設定在375px寬的螢幕上,字型大小為40px
html
<style>
/* 設定媒體查詢CSS的語法 */
/* @media (媒體特性) {
選擇器 {
CSS屬性
}
} */
@media (width:375px) {
html {
font-size: 40px;
}
}
</style>
練習二:在螢幕寬度為375px的螢幕中顯示背景顏色為yellow;在寬度為360的螢幕中顯示背景顏色為red
```html
```
- 媒體特性是指設定裝置的螢幕寬度,如上例中的 “@media (width:375px)”,是指在寬度為375px的裝置中,html的字號設定為40px,相當於1rem=40px
1.4常用推薦寫法
上方展示的時媒體查詢最簡潔的寫法,現在推薦的時常用以及較為推薦的寫法:
語法:
```html
```
綜合程式碼:
```html
「其他文章」