手机页面上面 按钮点击的时候有阴影 如何除去？【html5吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：93,707贴子：
手机页面上面 按钮点击的时候有阴影 如何除去？收藏
手机页面上面 按钮点击的时候有阴影，怎么除去那个点击时的蓝色阴影？？在电脑上测试的时候
正常的，手机上运行
在点击小图片文字或者按钮的时候
都会有一个蓝色阴影出现，求高手解答！！！
html5,千锋超过万家合作企业,一年至少12场名企双选会,足不出户挑工作,学员&企业零距离.html5,多年教学经验,免费试学两周,满意再缴费,高薪互联网新起点!
大神呢？？
1.做好的页面在手机端测试时，发现部分浏览器，tap后会出现一个半透明的灰色背景，（被批...），起初以为是outline作怪，加上后发现没反应，最后发现是tap后的背景高亮，要重设这个表现，则需要设置-webkit-tap-highlight-color为所需色彩，直接透明吧：a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}2.另外，如何去掉textarea,input的默认样式（IOS上的圆角及内阴影等，Android未测试）：input,textarea{-webkit-appearance:}
我也是找了很久，才解决这个问题，希望对大家有帮助！
有时候，你难免多心。心眼一多，许多小事就跟着过敏，于是别人多看你一眼，你便觉得他对你有敌意；少看你一眼，你又认定他故意对你冷落。多心的人注定活得辛苦，因为太容易被别人的情绪所左右。多心的人总是胡思乱想，结果是困在一团乱麻般的思绪中，动弹不得。有时候，与其多心，不如少根筋。
本想冲女神回眸一笑，结果笑出个鼻涕泡。
楼主好人！
outline :none
66666，不错不错。我也找了好久才找到你这来
通过查看你的帖子，完美的解决了我的问题，谢谢大神
html5,博为峰教育国内上市公司出品,名企疯抢博为峰学员!html5,0基础小班授课,专家领衔授课,免费试听,满意后付款!
*, *:after, *:before {
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout:
-webkit-user-drag:
-webkit-user-select:
-ms-user-select:
-ms-touch-action:
-moz-user-select: -moz-}
登录百度帐号遮罩层弹出后,页面禁止滚动问题PC端和移动端的解决方案
解决方案PC端
pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条，达到无法滚动的效果。
也就是说给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性。
解决方案移动端
移动端取消滚动条是达不到效果的，这时就需要去除遮罩层和按钮层的touchmove的默认事件，代码如下：
1 $('.add,#bg').bind(&touchmove&,function(e){
e.preventDefault();原创哟，转载请附上本文连接()，作者 印前
后续更简单
最近让做一个h5的活动专题，便让我浩浩荡荡进入移动端大坑中。
设计美女做iPhone6的设计图。要求整屏滑动，类似易企秀做的事了。这时我选择了[swiper](http://www.swiper.com.cn/)框架做我的页面滑动。
问题描述：
那么问题来了，如何让这份设计图在不拉伸的情况下完美地在各个移动端设备上整屏呈现呢？
看下图红色框区域，需要我展示完全，又在同一屏中，不能有拉伸，还要适应在各种屏幕尺寸，该怎么呢？？？
摸索插曲：
最开始我想让整张图一起展示，最后我终于惊醒，整张图整屏，是在这样的条件下做不到的。
终于想到换种思路，背景如果是图片，在设计师的沟通下又是可以拉伸的。
/*背景图片*/
background: url(xxx.png/jpg) no-
background-size: 100%;
现在主要是让内容在不拉伸的情况下，完全展示出来。
现在流行的做法是用rem根据屏幕宽度来进行适配，具体做法原理将在该系列下一部分解释。
这样会导致我的页面内容虽然根据屏幕宽度改变了，但突然发现我的娘娘只剩半截了，其他部分都跑到屏幕下面了。。。
头又大了。。。。。我的娘娘啊 。。。。
现在集中精神考虑，究竟什么问题导致的呢?
聪明的小伙伴们可能都想到了， 我的手机屏幕又不是根据iphone6屏幕宽高按比例放大缩小的。。。。。。嗯，就是它了，原因是不同手机屏幕的宽高比例是不同的。
问题找到了，那么该如何解决呢？？？（穿插点心灵鸡汤，每个人都能发现一些问题，但我们要找到源头想办法解决它！)
终于在我经过蹩脚的数学计算后找到一种方法。有更好方法的欢迎联系我哟。
首先观察设计图一屏内容是高度尺寸更长呢？还是宽度的尺寸更长呢？
我们要让更长的得到完美展示，更短的自然也可以同比展现出来，好像是这道理吧，来点三脚猫数学功夫。
iphone6(宽高比) = iphone6Width(375)/iphone6Height(667) =（约等于）0.56
若要让在iphone6的内容完美呈现，应该以该比例来放大缩小。
比如在ipad上，768/1024，它的比例是0.75，此时娘娘就显示不完了。为什么呢？
因为： 根据rem的基础值一般会根据屏幕的宽度和基准iphone的宽度按比例缩放，此时768/375=2.048，那么此时整个页面要放大2.048倍，高度也要放大2.048倍也就是2.048*667=。
清楚了吗 ，此时放大后的屏幕尺寸 & 1024 那么，娘娘的脚就只能在滚动下一屏才能看见了。
那为了露出娘娘的脚，我们该如何缩放呢？
当屏幕宽高比&0.56（iphone6的屏幕宽高比时）我们就得依照iphone6的高度来缩放，缩放比例应该为(约等于)=1.535，再根据放大1.535得到此时设计图放大后的屏幕宽度1.535*375=575.625。
此时心乱没呢？哎呀，575.625比ipad的宽度768更小的嘛，这时就为整个容器加上padding-left(768-575.625)/2。所有留边居中显示，背景又是满屏填充。我觉得满足要求了。
那么有人会提出疑问了，如果屏幕宽高比&0.56时呢？此时就该根据宽度来缩放啦。。。
最后贴上代码
//使用jQuery
var windowHeight = window.innerH
var windowWidth = $(window).width();
var screenScale = windowWidth / windowH
if (screenScale & 0.56){
document.documentElement.style.fontSize = windowHeight * 0.56 / 10 + 'px';//设置html font-size基准值
// 此时计算宽度比实际宽度更小，为使内容居中
$('.wraper').css({"padding-left":windowHeight * (screenScale - 0.56)/2});
document.documentElement.style.fontSize = windowWidth / 10 + 'px';
其实更简单的是 background-size: cover属性， 能让图片在不拉伸的情况下 最大限度缩放图片以填充容器。
我觉得原理更自己折腾出来的类似，但有另一种更易理解的方式解释：
第一种情况： 图片宽高都需放大
若图片宽度为400px， 容器宽度为500px, 若按宽度缩放，要将图片放大1.25倍；
若图片高度为200px, 容器高度为400px, 若按高度缩放， 要将图片放大2倍；
显然若按图片宽度缩放，那不能将图片放大至填充满整个容器。 结论就是 哪条边放大倍数更大，即按此倍数缩放整张图片。
第二种情况： 图片需缩小
若图片宽度400px, 容器宽度200px, 若按宽度缩放，要将图片放大0.5倍；
2.若图片宽度200px, 容器宽度为150px,若按高度缩放，要将图片放大0.75倍；
结论同第一种情况，计算规则都得是容器宽度/图片宽度, 根据放大倍数大的来缩放。
阅读(...) 评论()提高网站在移动端打开速度的方法技巧-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 提高网站在移动端打开速度的方法技巧
提高网站在移动端打开速度的方法技巧
时间：&&&文章来源：马海祥博客&&&访问次数：
最近一项研究表明：80%的网民对移动端的浏览体验感到失望，同时，当体验提升时，他们会在智能手机上花费更多的时间。
由于64%的智能手机用户希望网站可以在4秒内加载完毕，但一半的网站花费了二倍以上的时间，达到了9秒，所以，今天马海祥就为大家介绍一些提高网站在移动端打开速度的方法技巧。
1、移动端用户的下载速度
让我们来研究下究竟是什么影响了智能手机上的网页加载速度，最明显的原因是智能机的网速，最佳情况下，移动端用户使用3G与4G上网。
在美国，57%的用户使用3G上网，27%的用户使用4G；在加拿大，4G用户更少；而在英国，4G还是新鲜事物。Pcworld的研究表明：在美国，3G平均下载速度为2mbps，4G则为6.2mbps；ofcom的研究显示，在英国3G的下载速度为2.1mbps；北美和欧洲以外的连接速度一般较慢；1mpbs可换算为122kb每秒，或者0.12mb每秒，因此以上的数据可以转换如下：
244 KB/s 3G用户平均网速值 (0.24 MB/s)
756 KB/s 4G用户平均网速值(0.76 MB/s)
如果把上述值乘以移动用户等待时间4秒，这意味着网站对于3G用户来说最大为1mb，而4G用户为3mb。
然而下载速度并不是瓶颈，网络延迟及智能机的内存与cpu才是瓶颈，即使手机可以在4秒内下载完1mb，页面也要花费更长的时间去加载，因为手机需要接收并解析代码与图片。
在桌面端，下载文件只占显示网站时间的20%，其余时间花费在解析http请求，获取样式表，脚本文件及图片上，由于移动端的cpu，内存与缓存跟桌面端完全无法相提并论，这些在手机上会花费更长的时间。
2、怎样减少加载时间
构建一个快速的网站，就是一个做出艰难决定与砍掉非核心体验的过程，如果某一项需求价值不大，去掉之，这个原则适用于所有开发阶段，尤其是规划和编码时。
减少依赖文件：更少的文件意味着更少的http请求与更快的加载时间。
降低图片大小：适应与调整高分辨率图片，在额外的下载时间中占居榜首，占用了宝贵的内存与处理资源。
减轻客户端负担：最佳实践是重新思考你的javascript，并使之降低到最小尺寸。
3、怎样减少依赖文件
如果你想为移动端用户隐藏图片，display:none与visibility：hidden是不能阻止文件下载的，测试下面的代码：
&div style=&display:&&
　　&&& &img src=&logo-none.png& /&
　　&/div&
　　&div style=&visibility:&&
　　&&& &img src=&logo-hidden.png& /&
　　&/div&
你可以观察下面的瀑布图，图片容器设置display: none或visibility: hidden后仍然会被下载。
替代方案是利用css加载背景图片（具体可查看马海祥博客《》的相关介绍），之后利用media query媒体查询来通过条件隐藏图片，这个技术最初被Jason grigsby测试过，之后被tim kandlec进一步拓展，亚马逊独立的移动端页面使用了此种技术，根据设备来条件加载特定的图片。
&meta name=&viewport& content=&width=device-width&&
　　&style&
　　&&& @media (max-width:600px) {
　　&&&&&&& .image {
　　&&&&&&&&&&& display:
　　&&&&&&& }
　　&&& @media (min-width:601px) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image1.jpg);
　　&&&&&&& }
　　&/style&
　　&div class=&image&&&/div&
你可以看到图片不加载的瀑布图：
4、保持最小数量的外联样式表
如果你已经根据断点来加载分开的样式表，你需要仔细思考这样的做法了，我们测试了以下的代码：
&link href=&extra-small.css& rel=&stylesheet& media=&screen and (max-width: 390px)& /&
　　&link href=&small.css& rel=&stylesheet& media=&screen and (min-width: 391px) and (max-width: 500px)& /&
　　&link href=&medium.css& rel=&stylesheet& media=&screen and (min-width: 501px) and (max-width: 767px)& /&
　　&link href=&large.css& rel=&stylesheet& media=&screen and (min-width: 768px)& /&
你可以看到这四个样式表在竖屏下(portrait mode)都被加载了。
因此无论如何这些样式表都会被加载，你需要把这些文件合并在一个文件里，减少http请求。
另一种方法，你可以通过后端处理，通过判断设备来自动插入样式表 (这种方式在wordpress的响应式网站中使用过)。
另一种方案可以使用内部样式，亚马逊独立的移动产品页面有一个6KB大小的外部样式表，连同一些内部样式，这只需要通过一个额外的HTTP请求来下载所有的页面样式，亚马逊的桌面版本并不是很高效，带有9个外部样式表，总共40KB。
5、利用CSS3代替图片
圆角，阴影，渐变填充等，这些样式不需要使用图片，可以减少http请求，加快加载时间（具体可查看马海祥博客《》的相关介绍）。
CSS3可以减少http请求，但增加了处理负荷，我们创建了一系列的html文件，每个文件包含一个基本的css3特性，参考下面的图表，你可以发现css3带来的处理时间很小，但不能不考虑，特别注意box-shadow对处理时间的影响最大。
6、DATAURI来代替图片与WEB字体文件
Data uri方案可以不使用任何额外资源就可以向html及css中插入内容，这个技术可以在web页面中插入任何内容，通常被用于插入图片及web字体文件，这个技术最大的好处是可以减少http请求。
Data uri使用很简单，你可以按照下面的格式，使用base64编码过的数据直接插入html与css中代替图片文件。
data:[MIME-type][;charset=encoding][;base64],[data]
举个例子，下面的小图标就是用data uri创建的：
代码在这：
&img alt=&& src=&data:image/base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAACI0lEQVQoz2P48/bFX1Tw58vn3/dv/rp56dfD238+vocIfl029UOC3dsgS4Y/nz4gq/794sm3VbO+zmr/MqX+S1/l597yb2vn/rpx6VN14od4+3cBRgx/vn9F1vB9/+bPPeVfJlZ/6S793JwDVPcxL/BjQeiHFNf3cbbvgw0Z4JZCwM/Lpz81Zn2qS/1Ul/apOv5jUfiHbP8PSc7vY23fh5m+C9JjALoVzQ8/zx7+0lH4IcvnQ4bXhwzPD8muINXhZu+C9N/56zB8mdr49/cfdH9/fPdj36bPLbkgpYH670KNQaoDdV47aTK8j7H+tmXpX6zg95+f545+7ix656PxzlP5jaf2c2M1hvcRZu8jzb4umfrn6xfs2v78+XFkx9sI2+fass8N1Rje+eu/dtR+YaD0Jj70296df3/+xKrr593bL91tnmnJMbwwVXtuoAbU+kxD5pmu4pvYkK9rVvz58B5Tz7dd257pKDAAlT43giEDFZA2NclXAe5fN60DOgZFx48fb6ICGRCqIchY/bmhKkibivinOdPRLPnQ1cwAUqGrCFQBVIes7ZmmzEtni9+vXiFr+DR9IsMzHfnXIV5vs5OeqUs/05B+rqcIdBhQ81M1yRfW+r+fPUHRMLWfAejir+tWATlf1ix/HR34wlL3ub7Scx2F56Yan6ZPQnPS+6oihlc+Tr/fv4OG+Levv+7d+X700PeDe3/dv4um+tfjhy9drQDa2DKqOJhVKgAAAABJRU5ErkJggg==& /&
Wordpress的响应式网站使用这个技术插入了图片及字体，波士顿环球报的响应式网站也使用了这个技术，他们的网站在智能手机上，四秒内就加载完毕了。
使用这项技术，从此不用为外部图片及字体文件劳心费神，也需要测试与比较是否值得应用这项技术来代替传统方式。
7、可缩放矢量图形(SVG)而不是图片
就像data URIs可缩放矢量图形(SVG)可以被嵌入到一个页面来减少HTTP请求数，例如，下面的图片是一个内联SVG：
这是代码：
&svg version=&1.1& id=&drop& x=&0px& y=&0px&
　　&& width=&17.812px& height=&28.664px&
　　&& viewBox=&296.641 381.688 17.812 28.664&
　　&& enable-background=&new 296.641 381.688 17.812 28.664&
　　&& xml:space=&preserve&&
　　&path fill=&#EE1C4E& d=&M314.428,401.082c-0.443-5.489-5.146-9.522-7
　　.52-14.186c-0.816-1.597-1.352-5.208-1.352-5.208 s-0.555,3.792-1.388
　　,5.425c-2.233,4.371-7.127,8.999-7.507,14.047c-0.36,4.794,4.101,9.191
　　,8.896,9.191 C310.49,410.354,314.816,405.941,314.428,401.082z&/&
　　&/svg&
SVG文件可以通过一个矢量图形编辑器，如Adobe Illustrator创建，一旦创建，在文本编辑器中打开文件并把其代码拷贝出来(减去任何不必要的数据)。
上面的代码在HTML文件中会生效，但不会在样式表中生效，若在一个样式表中嵌入SVG文件，需要先将它转换为一个数据URI，如果这样做，我们需要从编辑器中(一定要包括元数据)拷贝出，用base64编码，然后使用以下格式嵌入样式表:
data:image/svg+xml[;base64],[data]
这是代码：
background-image:url(data:image/svg+base64,PD94bWwgdmVyc2lvbj0i
MS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx
1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOi
A2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL
0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8x
LjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzE
iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Im
h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3a
WR0aD0iMTcuODEycHgiIGhlaWdodD0iMjguNjY0cHgiIHZpZXdCb3g9IjI5Ni42NDEg
MzgxLjY4OCAxNy44MTIgMjguNjY0Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI
5Ni42NDEgMzgxLjY4OCAxNy44MTIgMjguNjY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj
4NCjxwYXRoIGZpbGw9IiNFRTFDNEUiIGQ9Ik0zMTQuNDI4LDQwMS4wODJjLTAuNDQzL
TUuNDg5LTUuMTQ2LTkuNTIyLTcuNTItMTQuMTg2Yy0wLjgxNi0xLjU5Ny0xLjM1Mi01
LjIwOC0xLjM1Mi01LjIwOA0KCXMtMC41NTUsMy43OTItMS4zODgsNS40MjVjLTIuMjM
zLDQuMzcxLTcuMTI3LDguOTk5LTcuNTA3LDE0LjA0N2MtMC4zNiw0Ljc5NCw0LjEwMS
w5LjE5MSw4Ljg5Niw5LjE5MQ0KCUMzMTAuNDksNDEwLjM1NCwzMTQuODE2LDQwNS45N
DEsMzE0LjQyOCw0MDEuMDgyeiIvPg0KPC9zdmc+DQo=);
8、Sprites图
Sprites（雪碧图）技术可以把经常使用的图片合成为一张图片，从而减少http请求，比如当你将四张图片合成到一个sprite中后，http请求从4减少到1，需要显示的图片利用background-position属性来控制。
9、字体图标
字体图标是利用字体文件来包含符号和图表(如Wingdings或Webdings 都是某种图标字体)，可以用来代替加载一个图像文件，例如，下面的图标不是一个图像，而是Wingdings字体中的&h&字符:
Wingdings和Webdings有点过气了，现在有其他更专业的Web字体可用的，可以通过font-face加载。
单独的Web字体，对于所有图标来讲，HTTP请求的数量可以减少到一个，如果Web字体使用数据URI(如上所述)嵌入页面，HTTP请求可以减少到零，这正是WordPress使用的技术，这是他们样式表中嵌入的web字体：
WordPress访问所有这些图标，不会有任何额外的HTTP请求，因为图标通过数据URI，以Web字体的方式嵌入到WordPress的样式表中。
同时，字体图标可以使用CSS3关键帧动画(这很有用，比如&加载&图标(小菊花))，主要的缺点是，字体图标做成的CSS sprites只能是某个纯色，亚马逊的css雪碧图包括彩色图标，因此它不能使用这种技术。
如IcoMoon之类的工具可以很方便的建立一个自定义Web字体，所需要的只是每个图标的SVG文件。
10、避免内联iframe
每一个内联框架(iframe)都会生成一个HTTP请求，这是在iframe内没有另外依赖资源的情况下，这是我们做一个快速测试，比较一个iframe只含有文本。
包含一个iframe增加了将近0.2s的加载时间，为了保证web站点加载迅速，最好不要使用iframe。
11、移动先行
移动先行也适用于前端开发，编码时以移动用户作为第一考虑,然后为平板电脑和桌面逐步增强，减少不必要的依赖。
另外一种方式为桌面端优先，重型组件默认加载，然后为小屏幕隐藏这些组件(称为&优雅降级&)。
下面例子为桌面端优先的编码:
　　&&& .image {
　　&&&&&&& background-image: url(image1.jpg);
　　&&& @media (max-width:390px) {
　　&&&&&&& .image {
　　&&&&&&&&&&& display:
　　&&&&&&& }
　　&/style&
　　&div class=&image&&&/div&
在上面的代码中，默认是显示图像，然后在移动设备上通过媒体查询隐藏了图片。
下面的例子为移动端优先的编码：
　　&&& @media (min-width:391px) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image1.jpg);
　　&&&&&&& }
　　&/style&
　　&div class=&image&&&/div&
默认情况下，图片不显示，之后使用媒体查询对更大的屏幕进行渐进增强。
12、拆分到多个页面(单独的移动网站)
保持你的核心内容在页面上,之后提供到次要内容的链接到次要内容，这将减少HTML的加载负担，同时防止相关的资源被下载。
亚马逊的移动产品页面有通用的产品信息，同时提供链接到&用户评论&、&描述和细节&和&新&使用提供。
这就减少了三张图片的HTTP请求，且HTML的大小减少45KB。
13、保持最少重定向(单独的移动网站)
亚马逊有一个重定向，来引导游客到单独的移动页面，这带来了0.4秒的延迟，与之相比，戴尔的网站有两个重定向，带来了1.2秒延迟。
14、如何缩小图片尺寸
响应式图片的思路是让访客图像只下载那些最适合他们的设备的图片，对于智能手机，,使用低分辨率图像，可以快速下载和渲染。
亚马逊的独立的移动产品页面使用响应式图像技术，利用媒体查询分配一个特定的背景图像到一个div，这是亚马逊的代码:
&!-- // This meta viewport is inserted for iPhones // --&
　　&meta name=&viewport& content=&width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0&&
　　&!-- // This meta viewport is inserted for the Nexus S // --&
　　&meta name=&viewport& content=&width=device-width&&
　　&style&
　　&&& @media (max-width:390px) {
　　&&&&&&& #image-container {
　　&&&&&&&&&&& max-width: 109
　　&&&&&&& }
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image1.jpg);
　　&&&&&&& }
　　&&& @media (max-width:390px) and (-webkit-min-device-pixel-ratio:1.5) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image2.jpg);
　　&&&&&&& }
　　&&& @media (max-width:390px) and (-webkit-min-device-pixel-ratio:2) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image3.jpg);
　　&&&&&&& }
　　&&& @media (min-width:391px) and (max-width:500px) {
　　&&&&&&& #image-container {
　　&&&&&&&&&&& max-width: 121
　　&&&&&&& }
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image4.jpg);
　　&&&&&&& }
　　&&& @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:1.5) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image5.jpg);
　　&&&&&&& }
　　&&& @media (min-width:391px) and (max-width:500px) and (-webkit-min-device-pixel-ratio:2) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image6.jpg);
　　&&&&&&& }
　　&&& @media (min-width: 501px) and (max-width: 767px) {
　　&&&&&&& #image-container {
　　&&&&&&&&&&& max-width: 182
　　&&&&&&& }
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image5.jpg);
　　&&&&&&& }
　　&&& @media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:1.5) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image7.jpg);
　　&&&&&&& }
　　&&& @media (min-width: 501px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio:2) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image8.jpg);
　　&&&&&&& }
　　&&& @media (min-width:768px) {
　　&&&&&&& #image-container {
　　&&&&&&&&&&& max-width: 303
　　&&&&&&& }
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image8.jpg);
　　&&&&&&& }
　　&&& @media (min-width:768px) and (-webkit-min-device-pixel-ratio:1.5) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image8.jpg);
　　&&&&&&& }
　　&&& @media (min-width:768px) and (-webkit-min-device-pixel-ratio:2) {
　　&&&&&&& .image {
　　&&&&&&&&&&& background-image: url(image8.jpg);
　　&&&&&&& }
　　&/style&
　　&div id=&image-container&&
　　&&& &div class=&image&&
　　&&&&&&& &img src=&image1.jpg& /&
　　&&& &/div&
　　&/div&
尽管亚马逊在内部样式中有八个产品图片，在竖屏模式下的iPhone 4或Nexus S只有两个被下载。
《波士顿环球报》的响应式网站，采用了利用不同的data-fullsrc来加载图片的响应式图像技术，这是一个html标记和一个服务器端JavaScript重定向规则的组合：
&img alt=&& src=&mobile-size.r.jpg& data-fullsrc=&desktop-size.jpg& /&
src是手机上使用的图像，确保网站默认为尺寸较小的版本(移动先行)，而data-fullsrc是全尺寸的图像，JavaScript用来检测设备的屏幕大小，之后写入cookie。
对于大屏幕，JavaScript利用data-fullsrc上的高分辨率图像替换较小的图片，服务器也使用Apache重写规则，来在图像文件的名称中检查.r.(mobile用的图片带有.r.)，同时显示一个备用GIF，而不会使用较小的移动图像(从而防止手机大小的图像被下载到桌面)。
微软的响应式网站使用的斯科特&杰尔的Picturefill技术:
&div data-picture data-alt=&Alternate text here&&
　　&&& &div data-src=&image1.png&&&/div&
　　&&& &div data-src=&image2.png& data-media=&(min-device-pixel-ratio: 2.0)&&&/div&
　　&&& &div data-src=&image3.png& data-media=&(max-width: 539px)&&&/div&
　　&&& &div data-src=&image4.png& data-media=&(max-width: 539px) and (min-device-pixel-ratio: 2.0)&&&/div&
　　&&& &noscript&&img src=&image1.png& alt=&Alternate text here& /&&/noscript&
　　&/div&
注意：上面的代码片段中，data-picture= &&应该是data-picture，没有= &&(=字符是smashing magazine的所见即所得编辑器自动插入的)，利用这种技术，JavaScript扫描页面的代码，发现包含data-picture属性的div，然后根据data-media属性插入一个新的img标签。
这些响应式图像技术的主要好处有:
（1）、小屏幕下载低分辨率的图像，而大屏幕下载高分辨率图像。
（2）、只下载所需的图片，而不需要的图片不在后台加载。
另外，还有各种各样的其他技术实现响应式图像，你可以查看马海祥博客《》的相关介绍，了解更多的细节。
15、如何减少客户端处理
星巴克的响应式网站在chrome下禁用javascript后，桌面端良好的网络环境下花费了3.53秒加载完毕，而启用javascript后，花费了4.73秒，增加了34%。
Javascript对加载时间的影响，在移动端较小的内存，cpu及缓存下会表现得更明显，通常，我们要重新思考javascript的使用，并保持其在最小尺寸。
一个很好的例子是BBC移动网站的JavaScript，网站不使用外部JavaScript文件&&都是内联，内联脚本仅限于几行，没有显著影响内存，HTML文件和所有内联JavaScript花费0.78秒加载完毕，就像BBC那样，亚马逊的移动产品页面也没有外部JavaScript文件，而使用最少的内联脚本，HTML文件和所有内联JavaScript花费0.75秒加载完毕。
请注意：jQuery不是一个轻量的替代方案，事实上是jquery本身的补充。
这两个网站在iPhone 4下均在4秒内加载完毕，使用一个JavaScript框架前，考虑它是否真的有必要，在某些情况下，使用少量的JavaScript比调用一个框架更有效。
16、避免组件
组件对实际加载时间的影响是灾难性的，为了验证这一点，我们创建了一系列简单的HTML文件，每个文件包含默认的嵌入代码，一个小部件，你可以看到下面的结果多糟糕。
注意，这不是一个完美的测试，因为这些都是在模拟环境中的可控实验，不过结果比较有意思。
在单个页面中，结合他们为一个小部件，结果只包含这个部件的情况下，加载时间长达4秒。
17、服务器端(后端)技术
除了优化前端，服务器端技术也可以用来加速加载时间，这些技术都值得考虑，如以下几点：
（1）、缓存HTTP重定向来加速重复访问。
（2）、合并HTTP重定向链来减少重定向。
（3）、使用HTTP压缩来减少数量的字节(Gzip或缩小)。
马海祥博客点评：
为了满足移动用户的高期望，你需要对网站针对移动设备进行优化，在4秒或更少的时间里加载完毕，最好的方式来达到4秒这个魔术时间，是通过减少JavaScript和优化HTML、CSS和图像，保持智能手机上最少的处理负荷。
本文为原创文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/ydseo/1092.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
日，微软在全球190个国家和地区提供Windows 10正式版的免费升级，Windows7、Windows 8和Windows……
最近和几个博友一直在讨论：信息架构与用户体验是有什么不同？，信息架构和用户体验，那个才是未来网站建设……
百度在2月1日发布了「2013年中国网站发展趋势报告」，报告称去年网站增长数量较大，但优质站点仅占1/4，低……
新闻源是指符合百度、谷歌等搜索引擎种子新闻站的标准，站内信息……
在过去的2013年中，搜索引擎行业可谓是风起云涌，群雄争霸，竞争……
一说到SEO技术，可能大家想到的就是白帽SEO技术和黑帽SEO技术，……
沙盒效应 沙盒英文单词叫Sandbox，是Google反击垃圾网站的重要措……
本篇文章记录了百度从2011年到2012年中旬百度大更新记录的文章。……
SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及……
本月热点文章}