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

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

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

前两天仿了一个站,但是有很多不如意的地方,比如自适应的问题,我想根据它的分辨率调用不同的样式,在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织梦程序做网站的时候,经常都会用到自定义表单。因为织梦默认的自定义表单是没有没有对提交的信息进行过滤,经常会有垃圾信息骚扰。这里提供2条检测规则,是利用正则方法,可以检测手机号...

帝国cms列表页分页样式美化

帝国cms列表页分页样式美化

跟上一篇讲过的一样,帝国自带的分页样式太过于丑,所以老威又找到了几种修改样式的方法,本文持续更新·····这是之前的分页样式我们首先进入帝国后台,点击系统设置->系统参数设置->信息设置,...

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

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

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

帝国cms搜索模版支持灵动标签调用的方法

帝国cms搜索模版支持灵动标签调用的方法

帝国CMS搜索模板不支持动态标签调用,从7.0到7.2再到刚发布的7.5,帝国官方团队始终没解决这个问题,这很不方便,但是帝国的强大可以让我们忽略这个问题,今天老威就把这个bug的解决方法说一下。第一...

帝国cms多终端访问[7.5亲测可用]

帝国cms多终端访问[7.5亲测可用]

随着移动端的流量越来越大,各大cms系统都开发了自己的移动端访问,帝国cms也开启了移动端访问,并且7.2版本在在原来版本的多访问终端功能基础上,做出更多的改进,让网站在多种访问端浏览更加的方便。如果...

帝国cms栏目页随机调用当前栏目内容

帝国cms栏目页随机调用当前栏目内容

老威做SEO教程也有段时间了,这期间也接触了大大小小的各种cms,其中还是帝国cms跟dedecms最深得我意,要是玩windows+iis环境的话,aspcms也是个很好的选择。在用帝国cms做站的...

评论列表

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

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

发表评论

访客

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