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

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

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

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

当我们用织梦cms结合老域名伪造一个老站的时候,可以按照域名的年龄批量修改文章的发布时间。在数据库执行以下命令,第二行是起始时间,第三行是结束时间。/*************************...

从SEO角度来看dedecms栏目页的优化

从SEO角度来看dedecms栏目页的优化

我们在用dedecms建站的时候,细心的人会发现它的列表首页页面会出现两个不同的链接一个是在其他页面链接到栏目首页的url,是www.lwseo.cn/seo/index.html另一个是栏目的分页给...

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

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

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

帝国cms列表页怎么调用关键字tag标签

帝国cms列表页怎么调用关键字tag标签

有很多朋友都在问帝国cms列表页怎么调用关键字tag,tag作为内链手法,对于SEO有一定的好处,下面老威就实例讲述一下帝国cms列表页面调用关键字tag标签的方法,分享给大家参考。具体实现方法如下:...

同域名用php自动识别PC与移动端进行不同的页面访问

同域名用php自动识别PC与移动端进行不同的页面访问

前几天老威有个客户需要做一个基于同域名下的不同页面的访问,考虑过写自适应,但是客户已经给出了模板,要改的东西太多也太复杂,客户对操作系统没有要求,在拥有两个不同的静态页面模板的情况下,想到了利用php...

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

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

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

评论列表

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

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

发表评论

访客

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