教你写一个简单的自适应css,根据分辨率调用不同的图片
前两天仿了一个站,但是有很多不如意的地方,比如自适应的问题,我想根据它的分辨率调用不同的样式,在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博客原创文章,欢迎各位转载,转载请保留或注明出处!