济南SEO » 网站建设 » 教你写一个简单的自适应css，根据分辨率调用不同的图片
教你写一个简单的自适应css，根据分辨率调用不同的图片
老威 2018-06-08 共300人围观 ，发现0个评论前两天仿了一个站，但是有很多不如意的地方，比如自适应的问题，我想根据它的分辨率调用不同的样式，在PC端调用图片1在移动端调用图片2，一开始以为通过js可以解决，但是网上翻了半天没找出一个正儿八经的解决方案，不得以来找前端大神朋友，大神几下给我出了一个简单的自适应css，原来直接用@media控就行了，贴在下面。
<style>
.pc{ display:block;}
.pc img{ display:block; margin:0 auto;}
.Mobile{ display:none;}
.Mobile img{ width:100%;}
@media screen and (max-width:640px) {
.pc{ display:none;}
.Mobile{ display:block;}
}
</style>在需要调用的地方加上以下代码
<div class="pc"> <img src="/1.jpg"> </div> <div class="Mobile"> <img src="/2.jpg" /> </div>
大功告成，本文为老威SEO博客原创文章，欢迎各位转载，转载请保留或注明出处！
赏
谢谢打赏
支付宝
微信
