自适应网页设计（Responsive Web Design） - 阮一峰的网络日志
自适应网页设计（Responsive Web Design）
随着3G的普及，越来越多的人使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、"自适应网页设计"的概念
2010年，Ethan Marcotte提出了（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
上面有更多这样的例子。
这里还有一个，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行。
　　&meta name="viewport" content="width=device-width, initial-scale=1" /&
是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用。
　　&!--[if lt IE 9]&
　　　　&script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"&&/script&
　　&![endif]--&
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
　　width:
只能指定百分比宽度：
　　width: xx%;
　　width:
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
　　body {
　　　　font: normal 100% Helvetica, Arial, sans-
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
　　　　font-size: 1.5
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
　　small {
　　　　font-size: 0.875
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
的含义是，各个区块的位置都是浮动的，不是固定不变的。
　　.main {
　　　　float:
　　　　width: 70%;
　　.leftBar {
　　　　float:
　　　　width: 25%;
的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
"自适应网页设计"的核心，就是CSS3引入的模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
　　&link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" /&
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
　　&link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" /&
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
　　@import url("tinyScreen.css") screen and (max-device-width: 400px);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float:
　　　　　　width:
　　　　#sidebar {
　　　　　　display:
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，"自适应网页设计"还必须实现图片的。
这只要一行CSS代码：
　　img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
　　img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的：
　　img { -ms-interpolation-mode: }
或者，Ethan Marcotte的。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有可以做到这一条，服务器端和客户端都可以实现。
一、空格规则
HTML 代码的空格通常会被浏览器忽略。
JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案，本文介绍它的原理和用法。
一个多月前，我的个人网站遭受 DDOS 攻击，下线了50多个小时。这篇文章就来谈谈，如何应对这种攻击。加入本站QQ群（），交流分享网站建设、优化、SEO技术。。。
.x*********
响应式网站案例，欢迎大家访问，提出改进意见！！Kaka 于
18:28:33 回复整体很不错呀，只是下面的“联系电话”背景图在小屏幕时不缩小，需要改进下。
求交流方式!!!!
民间也藏龙卧虎，楼主让我领略了创新式思维的绝对优势。太厉害了！！嘿嘿
我也把我的zblog改成响应式了
评论还没法用英文名称？？Kaka 于
22:33:25 回复可以用英文的，可能你的某关键词在屏蔽列表里。Aaron 于
22:06:08 回复从你这扒了JS源码待用，哈哈
哈哈，晚上刚完成了简单自适应的调整不过准备对主题大调整，所以暂时没去像你这样调整的如此彻底Kaka 于
22:32:02 回复你的也不错哦，头部现在还缺少栏目导航，返回顶部也还没做，另外，对广告代码的加载你没有处理，如果在手机里不用显示广告，就应该在手机里不用加载广告代码，否则严重拖慢速度的。Aaron 于
21:13:12 回复你这样的加载方式不违反Adsense规则吗？Kaka 于
21:28:52 回复不违反的，通过js document.write输出，并没有更改广告代码。
楼主的技术很牛逼，得向你多学习学习
Powered By
Designed by Han'space当前位置：&>&&>&深圳响应式网站建设公司分析：响应式网站好吗？发表日期： 17:47:49作者来源：方维网络浏览次数：598
& &对于很多外行来说，听到&响应式网站&的第一反应是&&啥是响应式网站？其与我们公司目前的网站或者之前的网站有何不同？
简单来说，响应式网站是被终端多样化催生出来的。
在还没有智能手机的时代，我们上网主要是使用PC端，此时的网站都是&自适应网站&，根据显示屏幕的大小，对网站进行压缩处理，以让整个网站全貌展示出来。例如，我们曾经使用PDA或者功能机上网，打开的网页几乎都是很小，通过放大才能点击链接。当出现了智能手机、平板电脑，乃至智能眼镜的时候，就需要一种新的网站技术&&这就是响应式网站技术。
简言之，响应式网站可以在不同终端，根据终端特点去呈现网站，让网站获得更好的展示效果和体验。这是对于用户来说。对于网站的开发者来说，制作自适应网站，只需要考虑电脑屏、只需要考虑鼠标点击行为，但是制作自适应网站，需要考虑的要素就很多，实际上，制作响应式网站比制作自适应网站，难度要大。
如上，基本解释清楚了响应式网站。然而，在业内，对响应式网站还有一些争议，莫衷一是。方维网络将其总结出来，让用户评判。
响应式网站更便于优化还是不利于优化？
有人说响应式网站更利于优化和百度收录，理由是PC和移动端，都是相同的代码，同一个关键词，都会被收录。另外，搜索引擎永远都是喜新厌旧，对新页面、新建站技术、新的效果，总是基于肯定。
也有人反对这一点。他们的理由是：PC搜索引擎和移动搜索，在关键词推荐、搜索排名是有PC和移动之分的，如果是迎合搜索引擎，PC端的网站代码和移动网站代码应该是有所不同的，至少选定的关键词应该不一样，但是响应式网站的代码相同，其实不利于搜索优化。
两者似乎都有理由。但是，方维网络能够肯定的一点是&&不管是否是响应式网站，都需要进行SEO工作。这一点确凿无疑。
响应式网站在移动端呈现效果是否最优？
为了适应移动端较小的屏幕，自适应选择了压缩网页，响应式网站选择了删减部分栏目，或者对部分栏目进行布局的调整。
从用户的角度看，显然，响应式网站与自适应网站相比，在移动端的展现效果更好。但是，响应式网站毕竟对网站的内容进行了部分&阉割&和布局妥协。所以，与专门设计的移动端网站相比，或者与移动APP交互设计相比较，响应式网站的展现效果和互动效果，还是略逊一筹的。
它们的体验优劣是这样的：
专门的移动网站＞响应式网站＞自适应网站
当然，从制作成本上看，专门的移动网站＞响应式网站＞自适应网站，关系一样。
响应式网站会流失客户还是增加客户？
恐怕这一问题是企业最为关心的。
有人认为响应式网站会导致很多客户流失。理由是很多客户使用的是较低版本的浏览器，响应式网站与这些浏览器不匹配。
也有人认为，响应式网站会增加客户，理由是移动用户造就超越了PC用户，带给用户更好体验，难道不会增加用户信赖吗？
在方维网络看来，响应式网站导致用户流失的理由站不住脚，因为，随着手机的更新换代，自带的浏览器基本上都是高性能的浏览器，完全可以打开和匹配响应式网站。另外，响应式网站虽然构架上更为简单，但是因为目前企业展示方式多样，因为构架和布局简单导致用户流失，这种情况其实发展概率很小。
总之，方维网络认为，响应式网站是网站设计和制作的趋势之一，特别适用中小企业、小微企业，因为响应式网站的建设、维护成本，都比较低廉。
中小企业、小微企业面对响应式网站，最需要回答的已经不是&&响应式网站好不好，而是&&找一家专业建设响应式网站的服务商。如没特殊注明，文章均为方维网络原创,转载请注明来自http://www.szfangwei.cn/news/4236.html 下一篇：
上一篇： 相关网站设计案例相关推荐新闻相关标签网站建设解决方案400-800-93855HTML5响应式（自适应）网页设计的实现
& 发布时间： 16:10:51 & 作者：damys &
本篇文章主要介绍了HTML5响应式（自适应）网页设计的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了HTML5响应式（自适应）网页设计的实现，分享给大家，具体如下：
第一步：在网页代码的头部，加入一行viewport元标签
&meta name=&viewport& content=&width=device-width, initial-scale=1& /&
viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js
&!--[if lt IE 9]&
　　　　&script src=&http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&&&/script&
&![endif]--&
第二步：（注意）不使用绝对宽度，字体大小
width: / width:XX%;
第三步：（注意）字体大小
字体大小是页面默认大小的100%，即16像素
字体不要使用绝对大小&PX&，要使用相对大小&REM&
html{font-size:62.5%;}
body {font:normal 100% Arial,sans-font-size:14 font-size:1.4 }
第四步：流动布局
&流动布局&的含义是，各个区块的位置都是浮动的，不是固定不变的
.left{ width:30%; float:left}
.right{ width:70%; float:}
其好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现
第五步：选择加载CSS
&自适应网页设计&的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件
&link rel=&stylesheet& type=&text/css& media=&screen and (max-device-width: 600px)&
href=&style/css/css600.css& /&
上面的代码意思是，如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件
&link rel=&stylesheet& type=&text/css& media=&screen and (min-width: 600px) and (max-device-width: 980px)&
href=&css600-980.css& /&
另有(不建议使用)：除了用html标签加载CSS文件，还可以在现有CSS文件中加载
@import url(&css600.css&) screen and (max-device-width: 600px);
第六步：CSS的@media规则
@media screen and (max-device-width: 400px) {
.left{ float:} }
当屏幕小于400时，left取消了浮动
第七步：图片的自适应
&自适应网页设计&还必须实现图片的自动缩放。
img, object {max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img {width: 100%;}
windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令
img { width:100%; -ms-interpolation-mode:}
或使用js--imgSizer.js
addLoadEvent(function() {
　　　　var imgs = document.getElementById(&content&).getElementsByTagName(&img&);
　　　　imgSizer.collate(imgs);
注：如有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片
简易式操作：
&style type=&text/css&&
img{ max-width:100%;}
video{ max-width:100%; height:}
header ul li{ float: list-style: list-style-type: margin-right:10}
header select{display:}
@media (max-width:960px){
header ul{ display:}
header select{ display:inline-}
&li&&a href=&#& class=&active&&Home&/a&&/li&
&li&&a href=&#&&AAA&/a&&/li&
&li&&a href=&#&&BBB&/a&&/li&
&li&&a href=&#&&CCC&/a&&/li&
&li&&a href=&#&&DDD&/a&&/li&
&option class=&selected&&&a href=&#&&Home&/a&&/option&
&option value=&/AAA&&AAA&/option&
&option value=&/BBB&&BBB&/option&
&option value=&/CCC&&CCC&/option&
&option value=&/DDD&&DDD&/option&
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
大家感兴趣的内容
12345678910
最近更新的内容如何区别一个网站是否响应式
很多人对于响应式网站的定义是：能够适应不同屏幕大小终端设备的网站称之为响应式网站。所以很多人都会把自适应网站当做响应式网站，但是其实响应式网站和自适应网站是有区别的，它们两者从形式上看，都是可以实现自动适应不同屏幕大小的终端设备，但是这两者是有根本的区别的。
很多人对响应式网站和自适应网站都存在误解，会以为这两者都是同一类型的网站，只是叫法不一样。但是如果通过实际的浏览体验，就能分辨出它们的区别。可以说自适应只是响应式当中的一个子集，也就是说响应式的开始形态是自适应。要完全区别于它们两者，首先你要了解，什么是响应式布局？什么是自适应布局？
什么是响应式布局？
响应式网页布局设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。
什么是自适应布局？
自适应网页布局设计指网页能够在不同大小的终端设备上自行适应显示。简单来说：就是让一个网站在不同大小的设备上呈现显示同一样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动缩放。
总的来说响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式网站在不同的设备上看上去是不一样的，会随着设备的改变而改变模板样式、模块排版、展示样式。而自适应不会，所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。可能说的那么多，大家会觉得响应式网站做起来肯定很难，但是其实不然，不管懂不懂技术，懂不懂代码都可以利用建站宝盒响应式建站系统来建设响应式网站。响应式网站不单止变得易于优化，更多的是提高了用户的一个浏览体验度。
所以说看一个网站是不是响应式网站，不能单单看它能不能自动适应不同大小设备，还要看适应以后的展现样式，更为重要的是你自己要多了解，不然就很容易混淆。希望本文能帮到你分清响应式网站和自适应网站的不同之处。
H5响应式建站系统详情：http://www.nicebox.cn/?s=hyc
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
易推宝是一套一站式网络推广解决方案，全终端访问，全网推广。
建网站只要6步，轻松解决建站难题，实现全网营销
今日搜狐热点