Responsive Design
render at the width of the device.
responsive image size.
adapt to different screen width (media query).
<!-- make the content render at the width of the device -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />/* 讓圖片不超過螢幕寬度 */
img { max-width: 100%; }/* 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.
Last updated
Was this helpful?