RWD 的核心是透過 CSS 的控制，讓同一份 HTML 網頁能在螢幕尺寸改變時，自動回應最適當的 CSS 佈局，讓網站在不同裝置上都有流暢的排版以及良好的使用者體驗,
根據螢幕尺寸切換 CSS 設定 👄
you must know about RWD：
- How to define Size of document on Html — viewport
- how to set CSS setting on Different Size— media queries
- When to change the layout of the page — breakpoint
- How to test RWD of setting with your browser DevTools
RWD is kind of Design of rule :
Have ofter use : mostly fluid、column drop、tiny tweaks 。
Finilly CSS support comfort RWD of layout system ：
- flexbox
- grid
Application Bootstrap framware .
Media quies
Feature:
min-width用於任何寬度_大於_設定值的瀏覽器。
max-width用於任何寬度_小於_設定值的瀏覽器。
min-height用於任何高度_大於_設定值的瀏覽器。
max-height用於任何高度_小於_設定值的瀏覽器。
orientation=portrait用於任何高度_大於或等於_寬度的瀏覽器。
orientation=landscape用於任何寬度_大於_高度的瀏覽器。
📓 : you could be use
or ', ' and ' , 'not '
Meix lot feature of media quires .
Rule Design comfort to Mobile first !
//default mobile styles go here first before media queries
@media screen and (min-width: 400px) {...}
@media screen and (min-width: 600px) {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}All of the four sets above will be read, But since CSS is read from the top to down, if there have a repeating style,
Explain :
the min-width: 1400px overrides the min-width: 400px style.