> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/responsive-design.md).

# 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**.