css媒体查询media尺寸

CSS媒体查询是一个优秀的工具，可以帮助我们在不同的设备和屏幕尺寸下实现页面的自适应布局，提升用户的体验。其中，媒体查询中最常用的就是尺寸查询。

尺寸查询可以根据不同的屏幕宽度和高度，为不同屏幕尺寸设置对应的样式。在使用媒体查询时，我们要使用@media 规则并指定媒体属性，并在其中添加样式规则。

@media screen and (max-width: 768px){
    /* 对于尺寸小于等于768px的屏幕，则使用此处样式 */
    .container{
        width: 100%;
        padding: 20px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px){
    /* 对于尺寸在769px和1024px之间的屏幕，则使用此处样式 */
    .container{
        width: 80%;
        padding: 40px;
    }
}

@media screen and (min-width: 1025px){
    /* 对于尺寸大于等于1025px的屏幕，则使用此处样式 */
    .container{
        width: 60%;
        padding: 60px;
    }
}

在上述代码中，我们使用了三个@media 规则，对应了不同的屏幕尺寸。例如，第一个规则中使用了max-width属性，表示当屏幕宽度小于等于768px时，使用规则中的样式。

同时，在媒体查询中，还可以使用min-height和max-height来设置屏幕高度的限制，从而实现更加细致的尺寸查询。此外，为了兼容不同的浏览器，我们还需要在媒体查询前添加“viewport”元标签。

总的来说，使用CSS媒体查询可以帮助我们实现更加灵活多样的页面布局，同时提高了用户的交互体验，是Web开发过程中不可或缺的一部分。