[CSS3] CSS Media Queries

最新推荐文章于 2025-08-28 01:06:59 发布

weixin_30437481

最新推荐文章于 2025-08-28 01:06:59 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5422457.html

本文介绍了如何使用CSS媒体查询来设计响应式的网页布局。通过不同屏幕尺寸的条件判断，可以实现不同设备上的显示效果优化。

Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson.

body{
    background-color: limegreen;
}

/*
    @media not|only mediatype and (expression)
        CSS-Code
*/

@media (min-width: 600px){
    body{
        background-color: pink;
    }
}

@media (max-width: 300px){
    body{
        background-color: red;
    }
}

@media (min-width: 400px) and (max-width: 500px){
    body{
        background-color: yellow;
        color: black;
    }
}