響應式網頁

解決跨裝置不同寬度顯示問題

RWD 與 AWD

img 這個不太受控的元素，常常會導致實作 RWD 時破版

.fluid-image {
    width: 100%;
    height: auto;
}

由於在意的是寬度會不會破版，所以將 width 限制在 100%

高度設定 auto 是因為圖片有比例問題，如果高度也設定固定高度，會造成圖片比例失真

寬高其中一邊為固定，另外一邊必定為 auto

設定 width:100% 有個問題，如果圖片寬度不夠時，會被硬拉到滿版，此時也可能會造成圖片顯示失真，改為 max-width 解決此問題

.fluid-image {
    max-width: 100%;
    // width: 100%;
    height: auto;
}

依據不同條件套用對應 CSS 樣式

@media <not | only> <media type> and (<media feature> <and | or | not> <media feature>){
    // CSS
}

常用的有 screen 跟 print

feature	description
device-width	裝置寬度
device-height	裝置高度
width	視窗寬度
height	視窗高度
max-device-width	最大裝置寬度
max-device-height	最大裝置高度
max-width	最大寬度
max-height	最大高度
min-device-width	最小裝置寬度
min-device-height	最小裝置高度
min-width	最小寬度
min-height	最小高度
orientation	裝置方向，portrait(直向) landscape(橫向)