利用媒体查询判断屏幕尺寸实现响应式自适应?

媒体查询是一种CSS技术，它可以根据不同的屏幕尺寸来应用不同的CSS规则，从而实现响应式自适应。

媒体查询的基本语法是@media，其中它包含了一个或多个媒体特性，可以根据这些特性来判断屏幕尺寸。例如：@media only screen and (max-width: 600px)，表示屏幕尺寸最大为600px时，使用以下样式。

媒体查询的媒体特性有很多，其中最常用的特性有width，height，orientation，resolution等，我们可以根据不同的屏幕尺寸，来选择性的使用这些特性。

例如，我们想要在小屏幕设备上展示出不同的内容，那么我们可以使用max-width这个特性，把手机屏幕分为不同的尺寸，例如320px，480px，600px等，然后根据不同的尺寸设置不同的样式：

@media only screen and (max-width: 320px){

.container{
width: 100%;
margin: 0;
padding: 0;
}

.content{
width: 100%;
margin: 0;
padding: 0;
}

}

@media only screen and (max-width: 480px){

.container{
width: 90%;
margin: 0 auto;
padding: 0;
}

.content{
width: 80%;
margin: 0 auto;
padding: 0;
}

}

@media only screen and (max-width: 600px){

.container{
width: 80%;
margin: 0 auto;
padding: 0;
}

.content{
width: 70%;
margin: 0 auto;
padding: 0;
}

}

通过媒体查询判断屏幕尺寸，可以更加容易地实现响应式自适应，我们可以根据不同的屏幕尺寸，来设置不同的样式，使得网页在不同的屏幕尺寸下都能够很好的显示，从而更好地满足用户的需求。