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

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

老威4年前 (2018-06-08)网站建设33941

前两天仿了一个站,但是有很多不如意的地方,比如自适应的问题,我想根据它的分辨率调用不同的样式,在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

分享给朋友:

相关文章

织梦dedecms怎么仿站?织梦仿站初级教程

织梦dedecms怎么仿站?织梦仿站初级教程

非常感谢老李出的这一套教程,本人也是一开始学习这个课程接触的dedecms哦,dedecms可以说是新手入门的首选了!...

帝国cms信息反馈表单怎么做

帝国cms信息反馈表单怎么做

帝国cms自带的信息反馈功能,不仅可以实现留言功能,还可以实现像在线报名、反馈这样的功能,所以说还是很强大的,它的原理是通过input获取数据库的表id,然后通过表单来提取数据,下面老威就把表单的制作...

老威的济南网站建设历程

老威的济南网站建设历程

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

帝国cms换空间之后怎么恢复数据库

帝国cms换空间之后怎么恢复数据库

老威平时做网站用帝国cms比较多,帝国的表数据其实是比较多的,那我们在给网站搬家的时候,怎么备份且恢复数据库呢?老威今天讲一下常见的三种方法。第一种是帝国官方给出的方法:一、在旧服务器备份数据库、“d...

帝国cms前台定时刷新插件以及sql语句

帝国cms前台定时刷新插件以及sql语句

我们做定时刷新的好处就是能让蜘蛛来这个页面总能抓到不同的内容,这样的话也有利于SEO优化,其实相比之前做轮链更好,但是这得基于一个平台二次开发一下,无奈老威编程辣鸡,先用着定时刷新乐呵乐呵得了。废话不...

“帝国cms限制的登录次数不得超过5次”怎么解决

“帝国cms限制的登录次数不得超过5次”怎么解决

刚刚接触帝国CMS的时候,我遇到了很多大大小小的问题。不可避免的是有许多细小的问题网上怎么也找不到解决方案。如果您遇到问题或成功地解决了它,应该将其记录下来,以便下次可以直接查看,而不必重复搜索解决方...

评论列表

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

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

发表评论

访客

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