不同css样式适应不同屏幕大小实现自适应宽度

@media screen and (判断属性){ CSS样式选择器 }

 

例如：

<div class="silder_photo"></div>

<style>　

 .silder_photo{width:100%;}
@media screen and (min-width: 1501px) {
　　.silder_photo{left:20%;}
　}

/* css注释：设置了浏览器宽度不小于1501px时 silder_photo显示20%宽度 */ 

@media screen and (max-width: 1501px) {
　　.silder_photo{left:5%;}
}

/* css注释：设置了浏览器宽度小于1501px时 silder_photo显示5%宽度 */ 

 

 

</style>