css-媒体查询

CSS3 多媒体查询

需要在header中添加

<meta name="viewport" content="width=device-width, initial-scale=1">

响应式设计

<!--
移动版本不显示caption
苹果retina屏dpi不一样

-->
@media only screen and (max-width: 1441px) {
    .container::after {
        content: "1441";
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1441px), only screen and (max-width: 1441px) and (min-resolution: 1.5dppx), only screen and (max-width: 1441px) and (min-resolution: 144dpi) {
    .container::after {
        content: "1441 Retina";
    }
}

@media only screen and (min-width: 1068px) and (max-width: 1441px) {
    .container::after {
        content: "1068 - 1441";
    }
}

@media only screen and (max-width: 1068px) {
    .container::after {
        content: "1068";
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1068px), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .container::after {
        content: "1068 Retina";
    }
}

@media only screen and (max-width: 1068px) and (min-width: 735px) {
    .container::after {
        content: "735 - 1068";
    }

}

@media only screen and (max-width: 735px) {
    .container::after {
        content: "735";
    }

    .carousel-caption {
        display: none;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 735px), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .container::after {
        content: "735 Retina";
    }

    .carousel-caption {
        display: none;
    }
}

@media only screen and (max-width: 340px) {
    .container::after {
        content: "340";
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 340px), only screen and (max-width: 340px) and (min-resolution: 1.5dppx), only screen and (max-width: 340px) and (min-resolution: 144dpi) {
    .container::after {
        content: "340 Retina";
    }
}

@media only screen and (min-width: 1441px) {
    .container::after {
        content: "1441";
    }
}