Responsive Design响应式网站设计心得笔记
这个词已经喊了很久了，一直都是小打小闹，没正经的做过大的响应式全站，这次终于有机会了。网站刚上线半个月，就要改版为响应式设计，支持手机/PC等各类终端显示浏览。今天把首页做好，并测试无误，这里把一些应该记录的东西写下来，一是备忘，二是分享给需要的人。
这次要讲的包括6个问题，1）html5标签的支持，2）响应式设计的单位选择，3）IE对媒体查询media query的支持，4）png24与png8图片选择的再探讨和IE私有滤镜filter:AlphaImageLoader的重温，5）定位position：fixed与IE6固定和抖动现象的恩怨，6）移动设备轮播图swipe插件和touchslider插件的选择及其使用注意事项总结。7）背景透明文字不透明的兼容写法，8）iphone下input[type=submit]提交按钮表现与CSS设置不一致的修复方法。下面分别简单总结一下。
一、对不支持html5标签的IE，可以使用类似html5 shiv的插件（地址http://html5shim.googlecode.com/svn/trunk/html5.js）也可以自己使用javascript 的createElement将这些不支持的标签创建一次，记得在CSS里要批量声明一下这些Html5标签为block类型，防止一些情况下IE不识别这些html5标签下的CSS样式。
二、响应式设计要尽量使用百分比宽度，以适应不同设备的显示需求。对于字体大小，为了对小屏幕手机设备写media query时候维护方便，请结合像素单位px并适当使用相对单位，虽然CSS3新增的相对单位rem(root em)比较灵活方便，但由于IE8和之前低版本不支持，所以目前来说，还是建议使用em，用到的地方自己就不要怕麻烦，多计算一下吧。
三、让IE支持媒体设备查询，可以使用MediaQueries.js和Respond.js，当然，如果你有时间和能力，自己去写的话，那就更有针对性啦。这里只是说明一下，在使用MediaQueries.js时候，对于结构稍微复杂或者使用定位position不当会造成IE下不生效，或者显示有问题，这时可以尝试以下方法排查一下：
1）将本地页面相关文件上传到服务器端，再进行测试预览。
2）将body元素进行定位，如设置为position:relative;这一招可以解决一些正常页面在添加了mediaqueries.js后显示反而错乱的问题，比如最经常遇到的IE7下某些元素显示为白板，不能点选。
3）必要时，响应式设计利器CSS3 media query和IE条件注释一起使用，为了表现一致或IE的向下兼容，这又是一个好的配合。强调一点，有些代码只让标准浏览器认识，而在IE中不生效，可以使用IE条件注释，但注意写法。你可能会觉得很简单：
<!--[if !IE]> 我不是 IE<![endif]-->其实，错了！因为非IE浏览器根本不会识别IE私有的条件注释语句。
正确的写法应该是：
<!--[if !IE]><-->
只有非IE浏览器才能看到我
<![endif]-->
这里的关键是条件注释后头的 <--> ，IE和其他标准浏览器对此的解析不一样的。
在IE中被当作内部注释，而在非IE浏览器中会与之前的<!--形成注释闭合标签，从而起到区别非IE浏览器和IE的作用，一般也常用<!–>。
四、关于png24和png8图片格式的问题。如果有半透明效果，选择png24当然抗锯齿，图像质量是最有保证的，但是对头疼的IE6还得单独处理，这就要看页面里涉及的元素有多少，再综合图片大小，页面大小，加载性能综合考虑是否采用PNG24。我的建议是能通过png8图片实现的尽量采用png8图片，必要时候可以加入杂边（PhontShop保存时的选项）。而不得已时需要使用png24来实现才使用。关于IE6下PNG24的处理可以使用类似jquery.pngFix.pack.js这样的插件，也可以使用IE的私有滤镜，使用filter:AlphaImageLoader滤镜的层一定要hasLayout，否则不能显示透明滤镜效果。注意私有滤镜会影响页面的性能，谨慎使用。
写法用例如下：
#logo_top{display:block; float:left; width: 295px; height: 39px; background: url("../images/logo_top.png") no-repeat 0 0;
_background:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled='true', sizingMethod='scale', src='../static/images/logo_top.png');
}这里要注意图片路径是相对于html页面来说的，不是css文件。而且要先使用IE6 专有的下划线hack对IE6去除CSS background，这样也能保证不影响到IE7+的性能，防止页面太重，出现假死现象。
| enabled | : |
可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true |false
|
|||||||||
| sizingMethod | : |
可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
|
|||||||||
| src | : | 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。 |
| Enabled | : | 可读写。布尔值(Boolean)。参阅 enabled 属性。 |
| sizingMethod | : | 可读写。字符串(String)。参阅 sizingMethod 属性。 |
| src | : | 可读写。字符串(String)。参阅 src 属性。 |
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}
P.S. 当想使用backgroundimage属性时，如果不想让图片原尺寸显示，而是类似于IMG width=100% heigth=100% 的效果，可以通过此filter实现。
Example：
span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";
以上是官方的说明。事实上实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般的解决办法是为链接或按钮添加：position:relative使其相对浮动。要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议使用浮动办法处理。
使用IE私有滤镜的优缺点如何？
优点：
1、绿色无插件；
2、相对插件来说效率高；
3、网速慢的时候，不会出现先灰底再透明的情况，支持远程图片；
4、支持Hover等伪类，但是得使用两张图片，网速慢的情况下，会导致第二张图片暂时无法显示，因为还没有完全载入；
缺点：
1、不支持平铺，虽然filter有sizingMethod="scale", 拉伸缩放模式，但是图片会变形，如果单纯的颜色或简单的渐变色可以横向平铺；
2、不支持Img标签，只能写在CSS background中；
3、不支持CSS Sprite，如果页面图片多，这又增加了请求次数；
4、AlphaImageLoader是缓慢的，它需要更多的内存，大量使用的话，会造成页面性能严重下降；内存消耗使用ProcessExplorer来测量。
五、关于IE6对positon:fixed的单独处理，这是老调重弹了。习惯上都是给根元素加一空背景来修复IE6页面滚动引起的抖动现象。这里要强调的一点是，如果IE6也有其个性化的背景图或者背景色，我们可以在这里一并设置，页面的默认背景色，背景图是否固定，这都随你自己定。并不是必须使用background-attachment:fixed这句。
最简单的做法其实就这一句：
*html,*html body{background-image:url(about:blank);/*修正IE6滚动抖动的bug*/background-attachment: fixed;/*根据自己实际，非必需*/
}六、关于支持触控滑动切换的轮播图，常用的插件很多，比如touchSlider,FlexSlider2,Swipe等。大部分是基于jQuery库开发的，这也保证了ie6-7这些低版本浏览器不会造成太差的体验，所以如果你不愿意放弃低版本的IE，还是建议使用基于jQuery开发的滑动轮播图插件。如果你已经将这些过时的IE丢进了垃圾桶，或者只针对智能手机设备的页面，那就大胆的使用新技术、新插件吧。下面是我使用Swipe的代码：
首先在页面head头引入swipe.js：
<script src="../static/js/swipe.js"></script>然后，根据插件规定的结构，设计好html页面，代码：
<div class="mini" id="focus-wrap"><div id="focus" class='swipe'><!--<img src="../static/tmp/tmpimg.jpg" alt="" >--><div class='swipe-wrap'><div class="swipe-item"><a href="#" title="" target="_blank"><img class="swipe-item-img" src="../static/images/slider/explorations1.jpg" alt=""></a></div><div class="swipe-item"><a href="#" title="" target="_blank"><img class="swipe-item-img" src="../static/images/slider/explorations2.jpg" alt=""></a></div><div class="swipe-item"><a href="#" title="" target="_blank"><img class="swipe-item-img" src="../static/images/slider/explorations3.jpg" alt=""></a></div><div class="swipe-item"><a href="#" title="" target="_blank"><img class="swipe-item-img" src="../static/images/slider/explorations4.jpg" alt=""></a></div></div></div><nav id="swipe-nav"><ul id='position'><li class='on'></li><li></li><li></li><li></li></ul></nav></div> 对应的CSS代码：
#focus-wrap{position: relative;height: 287px; width: 100%; overflow: hidden;}
.swipe {overflow: hidden;visibility: hidden;position: relative;
}
.swipe-wrap {overflow: hidden;position: relative;
}
.swipe-wrap .swipe-item {float:left;width:100%;position: relative;
}
.swipe-item-img{height: 287px;width: 100%;}
#swipe-nav{position: absolute; margin: 0 auto; width: 100%; height: 50px; left: 0; bottom: 0; background: #fff; -webkit-opacity: .5; -moz-opacity: .5; opacity: .5; filter:alpha(opacity=50);}
#position{text-align: center; line-height: 50px;}
#position li{display:inline-block;width:10px;height:10px;border-radius:10px;background:#141414;box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020;margin:0 2px;cursor:pointer;}
#position li.on{box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);background-color:#1293dc;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));background-image:-webkit-linear-gradient(top,#1293dc,#0f6297);background-image:-moz-linear-gradient(top,#1293dc,#0f6297);background-image:-ms-linear-gradient(top,#1293dc,#0f6297);background-image:-o-linear-gradient(top,#1293dc,#0f6297);background-image:linear-gradient(top,#1293dc,#0f6297);}
调用插件的js代码：
<script type="text/javascript">var bullets = document.getElementById('position').getElementsByTagName('li');window.mySwipe = new Swipe(document.getElementById('focus'), {startSlide: 2,speed: 400,auto: 3000,continuous: true,disableScroll: false,stopPropagation: false,callback: function(pos) {var i = bullets.length;while (i--) {bullets[i].className = ' ';}bullets[pos].className = 'on';},transitionEnd: function(index, elem) {}});
</script>不过swipe插件只支持标准浏览器和IE9+，在我的IE6-IE7上可不起作用的。大家要根据自己需求使用啊。效果图还是不错的，如下：
如果你要考虑IE6，IE7，建议使用touchslider插件。附上我的代码：
为了给浏览器减轻负担，不建议使用最新的jQuery库，touchslider官网用的是v1.7.2，个人感觉还是有些笨重，经过测试，发现jQuery 1.2.4即可支持该插件的运行，但是轮播切换动画效果会有瑕疵，使用jQuery v1.2.5自动轮播切换动画不再有问题，不过依然存在的缺点是对手指触摸向左滑动支持的有些问题，如果要保证触摸体验，至少应该引入jQuery 1.6.0才能保证完全的效果，有洁癖的要注意这一点。
使用<script src="../static/js/jquery-1.2.4.pack.js"></script>，只有30K左右的大小。因为做的是响应式网站，所以要保证在各浏览器上都要有正确的效果呈现，我的需求是窄屏幕按一栏显示，轮播图要100%宽度显示，大屏幕左右两栏，轮播图在右侧，并随着窗口resize保证右栏填满，用户体验要好。所以我写了个resize的处理追加在html页面的尾部：
<script type="text/javascript">$(function(){//$.fn.snow();$("#touchSlider").touchSlider({duration: 1000, delay: 5000,autoplay: true});function setSlider(){var $win = $(window);var winW = $win.width();var $touchsliderItem = $(".touchslider-item");if ( $touchsliderItem.length > 0) {if(winW < 1000 && winW > 960){$touchsliderItem.each(function(){$(this).css({"width":winW*0.665});}); }else if(winW <= 960){$touchsliderItem.each(function(){$(this).css({"width":winW});}); }else{$touchsliderItem.each(function(){$(this).css({"width":665});}); }}}$(window).load(function(){setSlider(); })$(window).resize(function(){setSlider();});})
</script>再贴一下html轮播效果代码：
<div class="mini" id="focus-wrap"><div id="touchSlider" class="index-img"><ul class="touchslider-viewport" style="-webkit-tap-highlight-color:transparent;"><div style="-webkit-tap-highlight-color:transparent;"><li class="touchslider-item"><a class="touchslider-item-link" title="" href="#"><img src="../static/images/slider/explorations1.jpg" height="287" /><div class="touchslider-item-desc"><h5>滑雪大冒险手游发布新版</h5></div></a></li><li class="touchslider-item"><a class="touchslider-item-link" title="" href="#"><img src="../static/images/slider/explorations2.jpg" height="287" /><div class="touchslider-item-desc"><h5>啪啪三国试玩就送大礼包</h5></div></a></li><li class="touchslider-item"><a class="touchslider-item-link" title="" href="#"><img src="../static/images/slider/explorations3.jpg" height="287" /><div class="touchslider-item-desc"><h5>啪啪三国试玩就送大礼包</h5></div></a></li><li class="touchslider-item"><a class="touchslider-item-link" title="" href="#"><img src="../static/images/slider/explorations4.jpg" height="287" /><div class="touchslider-item-desc"><h5>你好啊啊啊</h5></div></a></li></div></ul><ol class="touchslider-nav"><li class="touchslider-nav-item touchslider-nav-item-current"></li><li class="touchslider-nav-item"></li><li class="touchslider-nav-item"></li><li class="touchslider-nav-item"></li></ol></div></div> CSS样式为：
#focus-wrap{position: relative;height: 287px; width: 100%; overflow: hidden;}
.index-img{position:relative;height:100%;background:#efefef;overflow:hidden;text-align:center;-webkit-tap-highlight-color:transparent}
.index-img ul{position:absolute;left:0;height:100%;-webkit-transition:all 0.2s;overflow:hidden;-webkit-tap-highlight-color:transparent}
.index-img li.touchslider-item{float:left;height:100%;width:665px;}
.index-img li.touchslider-item img{height:287px;width:100%;margin:auto;vertical-align:middle;}
.touchslider-item-link{position:relative;display: block;height: 100%;width: 100%;}
.touchslider-item-desc{position:absolute;left:0; bottom:0;width:100%;height:50px; line-height:50px;padding-bottom:2px;background:#000;-webkit-opacity: .6;-moz-opacity: .6;opacity: .6; filter:alpha(opacity=60);text-align:left}
.touchslider-item-desc h5{width:90%;margin:0 0 0 14px;font-size:1.285em;color:#fff;text-shadow:0 1px 2px #171818;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.index-img .touchslider-nav{display:inline-block;position:relative;bottom:35px;overflow:hidden;position:absolute;bottom:5px;right:10px}
.index-img .touchslider-nav-item{float:left;width:10px;height:10px;overflow:hidden;/*fix ie6*/cursor:pointer;margin:3px;background:#c2c2c2;-webkit-box-shadow:inset 0 1px 0 #666;border-radius:15px;text-indent:-999em}
.index-img .touchslider-nav-item-current{background:#6FC0FF;}7）我们知道IE9+支持CSS3的新属性RGBA，可以设置透明度，而低版本ie是不支持这个属性的。这里我们处理IE也是使用IE的滤镜，并且要注意需要给包裹文字的子元素设置定位属性，消除透明，代码如下：
<div class="countdown"><p class="time">距离活动结束还有 <i id="days">00</i>天<i id="hours">00</i>小时<i id="minutes">00</i>分<i id="seconds">00</i>秒</p><p class="intro"><span class="fl">活动时间2013.12.05-2013.12.08</span><span class="fr">开奖时间2013.12.08</span></p></div>对应CSS代码：
.countdown{position:absolute;bottom:0;width:100%;font-size: 1.714em;line-height:1.5em;padding:10px 0;background:RGBA(0,99,159,.6)!important;background-color:#00639f;filter:alpha(opacity=60);}
.countdown p{text-align: center;position: relative;}
.time{font-family: "STHeitiSC";padding:30px 0;}
.time i{font-size: 2.5em;font-family: helvetica;}
.intro{font-size: .917em;padding:0 20px;}8）iPhone上的safari解析input[type="submit"]和input[type="reset"]按钮会以苹果浏览器的默认UI渲染,按钮背景色与圆角半径与自己的定义表现不一致，Keir W hitaker 在Styling Submit Buttons for Mobile Safari 中介绍的修复方法如下：
.form-action input{//other css code-webkit-appearance: none;
}测试生效。
今天太晚了，要下班去吃饭了。今天就写这么多，感觉还有的问题没说全面，下次接着说。
推荐文章阅读：
图片优化 第五章：AlphaImageLoader http://s5s5.me/2286
Microsoft CSS Vendor Extensions http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
[译]IE6终极备忘单：修复IE6下 25+ Bugs http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2965546
Responsive Design响应式网站设计心得笔记相关推荐
- 响应式网站设计（1）-理论
响应式网站设计 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局. 响应式网站的设计理念 响应式网站设计(Respo ...
- 经典案例：2012年最佳25个响应式网站设计作品《下篇》
2012年,响应式网站设计成为主流,这个概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出,其目标是要让设计的网站能够响应用户的行为,根据不同终端设备自动调整尺寸. 响应式设计 ...
- 响应式网站设计_通过这个免费的四小时课程，掌握响应式网站设计
响应式网站设计 This video tutorial from Kevin Powell teaches you to build responsive websites from scratch. ...
- IE浏览器支持响应式网站设计
目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...
- 响应式网站设计：利用Bootstrap设计响应式网站-index.html
响应式网站设计-index.html <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
- 响应式Web设计读书笔记与实践
前段时间在微博上看到了几个在当今前端圈中的大牛的撕逼大战,作为一个前端小白来说就只是看热闹的,热闹中看到了两本书,<无懈可击的Web设计>和<响应式Web设计>,前者没有买到纸 ...
- 响应式网站设计（2）-关于网站制作你不知道的那些文件儿
关于网站制作你不知道的那些文件儿 1.robots.txt robots协议 Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclu ...
- 响应式网页设计代码_消除响应式网站建设设计中的缺陷
在过去的5年里,移动流量的份额增长了20%,现在响应式网站设计已经被认为是理所当然的了.到2020年,您可以通过手机几乎可以访问任何网站,它会很好用.大多数用户如果看到一个网站在他们的智能手机或平板电 ...
- 《响应式网页设计》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...
最新文章
- python无法打开excle_无法打开Excel fi
- 粤东农批项目座谈会 农业大健康·李喜贵：功能性农业差异化加工
- 会为客户着想的商家才是好商家
- Leetcode--152. 乘积最大子序列
- 360 再次开源管理平台 Wayne：基于企业级 Kubernetes 集群
- 数据表--excel的读取案例
- 红帽子linux拨号上网,centos6.5宽带拨号上网的方法
- 刘汝佳小白书-最长回文字串
- laravel实现mysql读写分离
- 一般的java项目后台都有什么技术？
- uni-app使用，并引入thor-ui
- MongoDB免安装版安装
- redis持久化机制，深入分析redisAOF和RDB模式的利弊
- 清明节---山东又叫寒食节--吃冷食
- Swift实战之2048小游戏
- 基于FPGA的LD3320语音识别模块驱动设计
- 计算型服务器 存储型服务器本质区别
- CodeForces--ZeptoLab Code Rush 2015 (我参加的第一场cf比赛)
- Excel·VBA文字数字混合求和
- 考研408笔试之排序算法代码实现汇总