RWD:Responsive Web Design

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store