Responsive Design

responsive web design

• render at the width of the device.

• responsive image size.

• adapt to different screen width (media query).

HTML

<!-- make the content render at the width of the device -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

CSS

/* 讓圖片不超過螢幕寬度 */
img { max-width: 100%; }

media query

/* breakpoint: screen width >= 800px */
@media screen and (min-width: 800px) { /* styles */ }

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.