当前位置:首页 > 网站建设 > 正文内容

教你写一个简单的自适应css,根据分辨率调用不同的图片

小熊7年前 (2018-06-08)网站建设4569

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

扫描二维码推送至手机访问。

版权声明:本文由小熊SEO发布,如需转载请注明出处。

本文链接:http://www.lwseo.cn/wzjs/96.html

分享给朋友:

相关文章

老威的济南网站建设历程

老威的济南网站建设历程

我接手的首个网站是龙潮炭火烤鱼,当时实习的时候,建站一点不会,只懂点html基础,然后我领导是手把手教的我建站,一般建站初学者都是用dedecms建站,这个站也不例外,我记得当时领导还让我研究一个友点...

dedecms网站内容页图片太大怎么办

dedecms网站内容页图片太大怎么办

dedecms网站内容图片太大怎么办?很多套模板的朋友会遇到这个问题,自己没有什么html基础,感觉无从下手了。其实老威还是不太建议大家使用套板站的,套板站大多数都比较辣鸡,也可以说是人们用烂了的,大...

帝国cms使用灵动标签调用当前栏目实现高亮的方法

帝国cms使用灵动标签调用当前栏目实现高亮的方法

这几天老威又开始做帝国的站,之前都是简简单单的弄个栏目导航就完事了,现在看起来真是不太雅观,找了三种实现当前栏目高亮的方法,记录下来也供大家参考。方法1.<ul class="...

dedecms常用的分页标签及分页样式代码[无bug]

dedecms常用的分页标签及分页样式代码[无bug]

就目前来说,国内使用织梦dedecms来建站的站长还是有很多的,作为国内cms中做得最好的开源程序之一,让更多的朋友青睐,用其作为内核,根据自己需要做的网站做一套属于自己的模板就可以了,通用标签调用方...

帝国cms如何修改搜索提示页面?

帝国cms如何修改搜索提示页面?

喜欢帝国cms的一定会被某些样式所困扰,感觉不是很美观,搜索功能是大家常用的功能之一,帝国cms的搜索提示页面给人一种说不出来的感觉,如下图所示今天老威SEO博客分享一下修改搜索提示页面样式跟文字的方...

帝国cms更换漂亮美观的图形验证码

帝国cms更换漂亮美观的图形验证码

老威在SEO这一行做了快两年了,使用帝国cms大概一年半了,之前做的留言反馈都没加过验证码,容易被恶意留言,最近新做的一套网站要用到这个功能,觉得帝国cms的图形验证码有点扎眼,就顺手在重新写了下,外...

评论列表

访客
访客
6年前 (2019-10-29)

这个代码 会把PC和M端的图片都下载下来,有办法在PC 时候不下载M的图片吗,反之也是、

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。