# Responsive Design

{% tabs %}
{% tab title="responsive web design" %}
* render at the width of the device.
* responsive image size.
* adapt to different screen width (media query).
{% endtab %}

{% tab title="HTML" %}
```markup
<!-- make the content render at the width of the device -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
```
{% endtab %}

{% tab title="CSS" %}
```css
/* 讓圖片不超過螢幕寬度 */
img { max-width: 100%; }
```
{% endtab %}

{% tab title="media query" %}
```css
/* breakpoint: screen width >= 800px */
@media screen and (min-width: 800px) { /* styles */ }
```
{% endtab %}
{% endtabs %}

## key points

* (**smallest screen first**) the first **rules** we write **outside of a media query** should be our **starter or "base" rules** for the most basic devices, which we then enhance for more capable devices and **larger screens**.
