响应式设计判断手机访问或者电脑访问下显示不同的css样式
响应式设计判断手机访问或者电脑访问下显示不同的css样式，希望管理加分响应式自然不说它，基本上很多都会用到。如果在后期开发中添加判断不同分辨率来加载不同的css样式的时候，希望这篇文章对你有所帮助
我们需要明白响应式代码：
<style>
@media screen and (max-width: 500px) {
.ig { height: 50px; width: auto\9; width:100%;}
}
/* 设置了浏览器宽度小于500px时 .ig 显示50px高度 */
@media screen and (min-width: 800px) {
.ig {height: auto; width: auto\9; width:100%;}
/* 设置了浏览器宽度不小于800px时 ig 显示铺满屏幕宽度 */
</style>把这个响应式的放在一个叫.ig的里面。然后通过<img class="ig"来控制
补充下判断分辨率代码：
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 这里需要注意的是很多时候<img>有很多，要通过class来控制，添加位置上面已有，注意在style中的.和#用法
页:
[1]