移動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
「其他文章」