前兩天仿了一個(gè)站，但是有很多不如意的地方，比如自適應(yīng)的問(wèn)題，我想根據(jù)它的分辨率調(diào)用不同的樣式，在PC端調(diào)用圖片1在移動(dòng)端調(diào)用圖片2，一開(kāi)始以為通過(guò)js可以解決，但是網(wǎng)上翻了半天沒(méi)找出一個(gè)正兒八經(jīng)的解決方案，不得以來(lái)找前端大神朋友，大神幾下給我出了一個(gè)簡(jiǎn)單的自適應(yīng)css，原來(lái)直接用@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>

在需要調(diào)用的地方加上以下代碼

<div class="pc">
<img src="/1.jpg">
</div>
<div class="Mobile">
<img src="/2.jpg" />
</div>

大功告成，本文為老威SEO博客原創(chuàng)文章，歡迎各位轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)保留或注明出處！