---
# System prepended metadata

title: RWD

---

# RWD

## Layout
```
// Extra small screen / phone
@screen-xs: 320px;

// Small screen / tablet
@screen-sm: 640px;

// Medium screen / desktop
@screen-md: 768px;

// Large screen / wide desktop
@screen-lg: 960px;

// Extra large screen / full hd
@screen-xl: 1280px;
```

## 使用Rem配置時
可利用下列寫法調整1rem大小
``` css
html {
  font-size: 16px;
  @media screen and (max-width: 500px) {
    font-size: 14px;
  }
  @media screen and (max-width: 400px) {
    font-size: 11px;
  }
  @media screen and (max-width: 300px) {
    font-size: 8px;
  }
}
```