CSS3 响应式

viewport

<html>
<head>

 <!-- 声明这是一张响应式的页面,让浏览器支持网页自动伸缩 -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

</head>

<body></body>

</html>

媒体查询

针对不同的屏幕尺寸,设置不同的样式效果。

/* 768 ~ 991 像素屏幕 | iPad */
@media (min-width: 768px) and (max-width: 991px) {
 * {background: red}
}

/* 480 ~ 767 像素屏幕 | 普通手机 */
@media (min-width: 480px) and (max-width: 767px) {
 * {background: green}
}

/* 480 像素屏幕 | 小屏设备 */
@media (max-width: 479px) {
 * {background: blue}
}
CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex