CSS3 媒体查询
通过 CSS 媒体查询，你可以将文档格式化为在不同大小的输出设备上正确显示。
媒体查询和响应式网页设计
通过媒体查询，你可以针对特定范围的设备（如移动电话，平板电脑，台式机等）自定义网页的演示文稿，而无需更改标记。媒体查询由媒体类型和零个或多个表达式组成，这些表达式匹配特定媒体功能的类型和条件，例如设备宽度或屏幕分辨率。
由于媒体查询是逻辑表达式，因此可以将其解析为 true 或 false。如果媒体查询中指定的媒体类型与正在显示文档的设备类型匹配，则查询结果将为 true，并且满足媒体查询中的所有表达式。当媒体查询为 true 时，相关的样式表或样式规则将应用于目标设备。以下是标准设备的媒体查询的简单示例。
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
/* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
/* styles */
}
提示： 媒体查询是创建响应式布局的绝佳方式。使用媒体查询，你可以为在智能手机或平板电脑等设备上浏览的用户自定义你的网站，而无需更改页面的实际内容。
根据屏幕尺寸更改列宽
你可以使用 CSS 媒体查询来更改网页宽度和相关元素，以便为不同设备上的用户提供最佳的查看体验。
以下样式规则将根据屏幕或视区大小自动更改容器元素的宽度。例如，如果视区宽度小于 768 像素，则它将覆盖 100%的视区宽度，如果它大于 768 像素但小于 1024 像素，则宽度为 750 像素，依此类推。
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}
注意： 你可以在元素上使用 CSS3 box-sizing 属性，以更少的工作量创建更直观，更灵活的布局。
根据屏幕大小更改布局
你还可以使用 CSS 媒体查询，通过很少的自定义，使你的多列网站布局更具适应性和响应性。
如果视区大小大于或等于 768 像素，则以下样式规则将创建两列布局，但如果小于该列布局，则它将呈现为一列布局。
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}