响应式网页—— media媒体查询

使用场景：商品图片列表，由于用户上传的图片宽高度参差不齐，必须设置容器的固定高度。

为解决设置不同屏幕下，图片容器的固定高度。

实例1：https://www.jianshu.com/p/d4b250b81ce5

在利用媒体查询进行响应式布局开发时，用 js 写了一个动画，但不想让它在小屏幕上显示，这就要对屏幕尺寸进行筛选，那么在 js 中是如何使用媒体查询的呢？

    var result = window.matchMedia('(min-width:1200px)');
    var result2 = window.matchMedia('(min-width:992px)');
    var result3 = window.matchMedia('(min-width:768px)');
      if(result1.matches) {
            console.log("大屏幕(>=1200)");
        }else if(result2.matches){
            console.log("中等屏幕(>=992&<=1200)");
        }else if(result3.matches){
            console.log("小屏幕(>=768&<=992)");
        }else{
            console.log("超小屏幕(<=768)");
        }

实例二： https://blog.csdn.net/oscar92420aaa/article/details/51878153

@media all and (min-width:xxx) and (max-width:xxx){/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/}@media only screen and (min-width:xxx) and (max-width:xxx){/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/}
还有个一是#media screen and (min-width:xxx) 
/*上面针对了所有设备，这段是彩色屏幕设备*/
例如
<style>
.test1{
    width:1024px;
}
@media screen and (min-width:1024px){
.test1{
    width:1024px;
}
}

@media screen and (max-width:1024px){
.test1{
    width:720px;
}
}

@media screen and (max-width:720px){
.test1{
    width:480px;
}
}
</style>
<div class="test1">
</div>
意思是：当你设备分辨率(或者浏览器大小，根据浏览器拖放大于1024时)为大于1024px，test1显示为1024px;
当你设备分辨率(或者浏览器大小，浏览器拖放小于1024大于720时)为大于720px小于1024px时，test1显示为720px;
当你设备分辨率(或者浏览器大小。。。。)为小于720px时，test1显示为480px;

响应式网页—— media媒体查询

猜你喜欢