@media查询各设备自适应

        //大屏幕设备

        @media (max-width:1200px) {

.div1,.div2,.div3{width: 33%;}

.div1,.div2,.div3{height: 600px;

}

        //电脑屏幕设备

@media (max-width:992px) {

.div1,.div2,.div3{width: 50%;}

.div1,.div2,.div3{height: 400px;

}

         //手机平板屏幕设备

@media (max-width:768px) {

.div1,.div2,.div3{width: 50%;}

.div1,.div2,.div3{height: 200px;

}

        //小型旧版iphone4屏幕设备

@media (max-width:374px) {

.div1,.div2,.div3{width: 100%;}

.div1,.div2,.div3{height: 100px;

}

第二种:

@media (min-width:374px) {

.div1,.div2,.div3{width: 100%;}

.div1,.div2,.div3{height: 100px;

}

@media (min-width:768px) {

.div1,.div2,.div3{width: 50%;}

.div1,.div2,.div3{height: 200px;

}

@media (min-width:992px) {

.div1,.div2,.div3{width: 50%;}

.div1,.div2,.div3{height: 400px;

}

@media (min-width:1200px) {

.div1,.div2,.div3{width: 33%;}

.div1,.div2,.div3{height: 600px;

}