最近有人问我很多时候并没有做自适应,但是客户就是这么要求的,但是又不想单独做手机站,或者网上找了自适应网站扒下来发现大图用不了,自己换了代码之后发现,自适应的时候,大图很难看,根本没有自适应,或者宽度百分比了,但是高度没法自适应,怎么办,怎么弄?


其实很简单,用代码识别当前屏幕分辨率,我直接用修改前后的代码来给大家说明:

首先是修改前的:

/* fullSlide */

.fullSlide{width:100%;position:relative;height:440px;background:#000;}

.fullSlide .bd{margin:0 auto;position:relative;z-index:0;overflow:hidden;}

.fullSlide .bd ul{width:100% !important;}

.fullSlide .bd li{width:100% !important;height:440px;overflow:hidden;text-align:center;}


.fullSlide .bd li a{display:block; height:440px;}

.fullSlide .hd{width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}

.fullSlide .hd ul{text-align:center;}

.fullSlide .hd ul li{cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}

.fullSlide .hd ul .on{background:#f00;}

.fullSlide .prev,.fullSlide .next{display:block;position:absolute;z-index:1;top:50%;margin-top:-30px;left:15%;z-index:1;width:40px;height:60px;background:url(images/slider-arrow.png) -126px -137px #000 no-repeat;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;display:none;}

.fullSlide .next{left:auto;right:15%;background-position:-6px -137px;}



然后是修改后的修改部分我标红:

/* fullSlide */

.fullSlide{width:100%;position:relative;background:#000;}

.fullSlide .bd{margin:0 auto;position:relative;z-index:0;overflow:hidden;}

.fullSlide .bd ul{width:100% !important;}

.fullSlide .bd li{width:100% !important;overflow:hidden;text-align:center;}


.fullSlide .bd li a{display:block; }

.fullSlide .hd{width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}

.fullSlide .hd ul{text-align:center;}

.fullSlide .hd ul li{cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}

.fullSlide .hd ul .on{background:#f00;}

.fullSlide .prev,.fullSlide .next{display:block;position:absolute;z-index:1;top:50%;margin-top:-30px;left:15%;z-index:1;width:40px;height:60px;background:url(images/slider-arrow.png) -126px -137px #000 no-repeat;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;display:none;}

.fullSlide .next{left:auto;right:15%;background-position:-6px -137px;}



@media screen and (min-width: 1201px) { 

.fullSlide{height:440px;}

.fullSlide .bd li{height:440px;}

.fullSlide .bd li a{height:440px;}

}

/* css注释:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 

 

@media screen and (max-width: 1200px) { 

.fullSlide{height:440px;}

.fullSlide .bd li{height:440px;}

.fullSlide .bd li a{height:440px;}

/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 

 

@media screen and (max-width: 901px) { 

.fullSlide{height:140px;}

.fullSlide .bd li{height:140px;}

.fullSlide .bd li a{height:140px;}

/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ 

 

@media screen and (max-width: 500px) { 

.fullSlide{height:120px;}

.fullSlide .bd li{height:120px;}

.fullSlide .bd li a{height:120px;} 

/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */


很简单,把之前div类中定义的高度删除,在下面通过识别屏幕分辨率来分别定义图片的高度,这也是自适应中常用的,一串简单的代码,大家应该都知道。


上一篇 下一篇

用户登录


姓  名:
密  码:
     注册


网站咨询

我叫王小恺,专业从事嘉兴网站建设,嘉兴百度推广,嘉兴网站制作,嘉兴技术外包,嘉兴网站优化,已经有4年经验,与多家网络公司合作提供技术支持,联系电话:18867653334.我们竭诚为您服务!


随机文章

  • 每周电影《你好,疯子!》,万茜的多重人生电影刚开始其实给人的第一映像是模仿电锯惊魂,随着剧... 查看详情
  • 2017年开张了,欢迎各位咨询嘉兴网站建设关键词优化 很快,一个年假就走了,今年有幸的过年去了趟韩国,... 查看详情
  • 2016年的总结和体会2016年是我的本命年,也是我自主生存的第一年,什... 查看详情
  • [转]知识经济的崛起表明互联网让信息重新走向付费在今天知识经济和内容变现几乎是一对最热门的话题,几... 查看详情
  • 微信公众账号,微官网免费创建大家是否还在烦恼,我只是想做个展示型的微官网而已,... 查看详情

photoshop_cs6绿色版 工具 photoshop_cs6绿色...
ftp管理工具 工具 ftp管理工具...
dreamweaver_cs5绿色版 工具 dreamweaver_cs5...
硕思闪客精灵破解 工具 硕思闪客精灵破解...
css3鼠标放在div上产生旋转效果 html+div css3鼠标放在div上产生旋...
thinkcmf首页调用文章栏目名称 thinkcmf 本人最近发现thinkcmf挺...
2017年开张了,欢迎各位咨询嘉兴网站建设关键词优化 随笔 很快,一个年假就走了,今年有...
如何正确识别Baiduspider移动ua 文档 另外需要强调的是,对于robo...

友情链接





Copyright © 2015 - 2017王小恺博客 & 版权所有
嘉兴网络优化,嘉兴网站制作,嘉兴网站建设,嘉兴网络公司,咨询热线:18867653334(王)我们竭诚为您服务!