前兩天仿了一個站，但是有很多不如意的地方，比如自適應的問題，我想根據它的分辨率調用不同的樣式，在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博客原創文章，歡迎各位轉載，轉載請保留或注明出處！