---
# System prepended metadata

title: J_簡單的RWD
tags: [CSS, HTML]

---

# 簡單的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" />
```