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}
}
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程