# 簡單的RWD # 使用Media **寫在HTML的head中** ```html= //單純給予裝置 <link rel="stylesheet" media="screen" href="style.css" /> //給予裝置與條件 <link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="style.css" /> ``` --- **寫在CSS中** ```css= @media screen { * { font-family: sans-serif; } } ``` **或是在CSS中引入檔案** ```css= /* 在螢幕寬度 400px 以上，就會匯入 color.css */ @import url(color.css) screen and (min-width: 400px); ``` # 使用Query **and** ```css= /*如果螢幕寬度為 768px 以下，就套用 css 設定*/ @media screen and (max-width:768px) { } ``` ```css= /*如果螢幕寬度為 400px 以上 且 700px 以下，就套用 css 設定*/ @media screen and (min-width: 400px) and (max-width: 700px){ } ``` --- ```css= /*如果是彩色螢幕 或 彩色投影機設備，就套用 css 設定 */ @media screen and (color), projection and (color) { } ``` **not** ```css= /*如果是彩色螢幕不套用 css 設定，印表機才套用*/ @media not screen and (color), print and (color) { } ``` **only** ```css= <link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" /> ```