自适应css最简代码,根据分辨率调用不同的图片

2019-08-1506:35:14网页制作Comments2,297 views字数 426阅读模式

自适应的问题,我想根据它的分辨率调用不同的样式,在PC端调用图片1在移动端调用图片2,一开始以为通过js可以解决,但是网上翻了半天没找出一个正儿八经的解决方案,不得以来找前端大神朋友,大神几下给我出了一个简单的自适应css,原来直接用@media控就行了,贴在下面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15267.html

<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>

在需要调用的地方加上以下代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15267.html

Markup
<div class="pc">
<img src="/1.jpg">
</div>
<div class="Mobile">
<img src="/2.jpg" />
</div>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15267.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/15267.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定