WEB RWD 「Media Queries」 範例解釋說明 收集 – jashliao部落格

WEB RWD 「Media Queries」 範例解釋說明 收集

資料來源:https://hsinyu00.wordpress.com/2011/04/05/mobile-web-media-queries/

相關GITHUB: https://github.com/jash-git/RWD-WEB-Template-Ex

範例01- 400

HTML

CSS

 @media screen and (min-width: 400px) and (max-width: 700px) {
 .selector1{...}
 .selector2{...}
 } 

範例02- 單一條件[如果視窗最小寬度為500px，就套用這些CSS]

CSS

 @media screen and (min-width:500px) {.....}
 

利用 GITHUB範例 + GOOGLE Chrome F12測試RWD心得筆記圖: