媒体查询

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 框大小调整属性，以更轻松地创建更直观，更灵活的布局。

根据屏幕尺寸更改布局

您还可以使用CSS媒体查询来使您的多列网站布局更具适应性，并且只需很少的自定义即可响应设备。

如果视口大小大于或等于768像素，则以下样式规则将创建两列布局，但如果小于或等于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;
    }
}