自适应网站和响应式网站有什么不同？网站如何实现自适应
自适应网站和响应式网站有什么不同？网站如何实现自适应
自适应网站和响应式网站有什么不同？网站如何实现自适应　通俗的说，自适应网页设计也是响应式网页设计，响应式网页设计也是自适应网页设计。但是真正的细分起来，自适应只是响应式的一个子集，指网页中整体大图的自适应或者banner的自适应。　　响应式设计可以一个网站兼容多个不同终端　　响应式网页设计优势：流体网格的网站适合响应式网页设计。　　1、灵活性强，可以适应不同分辨率的设备　　2、方便快捷的解决多设备显示适应问题　　自适应网页设计优势：固定断点的网站适合自适应网页设计。　　1、实施起来代价更低，测试更容易　　2、自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了　　虽然响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点，但它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。 自适应网站实现的原理：关于网站如何做到自适应网页，可根据如下操作：首先，在网页代码的头部，加入一行viewport元标签。&metaname=”viewport”content=”width=device-width, initial-scale=1″ /&viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩 放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。　　“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
“自适应网页设计”的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。 其次，除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。自适应网站案例：
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
百家号 最近更新：
简介: 熟悉纳税申报工作，熟悉各种银行对 公业务
作者最新文章手机屏幕自适应之css写法_李昂_新浪博客
手机屏幕自适应之css写法
一千款手机，就有一千种屏幕，犹如千人千面。在运用原生html＋css写页面时，如何让不同屏幕显示出合适的效果，是个常见的棘手问题。
如今主流手机的尺寸分别有（单位为points）：
i4：320x480​​
i5／i5s／5c：320x568
i6：375x667
i6＋：414x736
主流安卓：360x533
可见，7款iphone有着4种尺寸，但主流的安卓机大多是同样的。​
最简单的方法，就是按最小屏幕的尺寸来写，多出的空间适当留空。或者大量使用比例而非绝对数值。
如果对页面元素布局的要求很高，那就需要针对不同屏幕写不同的css。方法有两种：
一，html外联不同的css文件
media="screen and (max-width: 400px)"
href="tinyScreen.css" /&
​此代码的意思是，浏览器宽度400px以下时，读取tinyScreen.cs文件。
二，css文档内区分
@media screen and (max-width: 400px) {
.a { width：200}
@media screen (min-width:400px) and (max-width: 600px)
.a { width：300}
此代码的意思是，浏览器宽度400px以下时a类的宽是200px，&#0px时a类的宽是300px。
另外，手机浏览器一般会全屏显示，浏览器宽度即等于屏幕宽度，因此max-width也可以写成max-device-width。暂时区别不明。​
博客等级：
博客积分：0
博客访问：4,078
关注人气：0
荣誉徽章：3359人阅读
怎样能在大小不同的屏幕上显示同样的网页（自适应网页设计）？
随着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张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
&自适应网页设计&到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行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-/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%;
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
&自适应网页设计&的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的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，所以只好写成：
　　img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
　　img { -ms-interpolation-mode: }
或者，Ethan Marcotte的imgSizer.js。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById(&content&).getElementsByTagName(&img&);
　　　　imgSizer.collate(imgs);
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：5256次
排名：千里之外适配不同分辨率屏幕 - Hi, Sun - ITeye博客
博客分类：
如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大显示器），变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来，我们将了解一下怎样通过HTML5和CSS3 Media Queries（媒介查询）相关技术来实现跨设备跨浏览器的响应式Web设计方案。
范例效果预览
首先，我们来看看本篇范例的。打开该页面，拖拽浏览器边框，将窗口慢慢缩小，同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。
我（原文作者）使用media query的方式设计了一些，比如、、、、、和等。
我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的宽度设置由"固定"方式改为"液态"，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置于主内容部分的下方，整个页面变为单栏布局。
我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些结构，包括页头、主要内容部分、侧边栏和页脚：
&div id="pagewrap"&
&header id="header"&
&h1 id="site-logo"&Demo&/h1&
&h2 id="site-description"&Site Description&/h2&
&ul id="main-nav"&
&li&&a href="#"&Home&/a&&/li&
&form id="searchform"&
&input type="search"&
&div id="content"&
&article class="post"& blog post &/article&
&aside id="sidebar"&
&section class="widget"& widget &/section&
&footer id="footer"& footer &/footer&
IE是永恒的话题；对于我们使用的HTML5标签，IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件：
&!--[if lt IE 9]&
&script src="/svn/trunk/html5.js"&&/script&
&![endif]--&
HTML5块级元素样式
首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点，但还是需要在样式方面做些工作，将这些"新"元素声明为块级：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: }
主要结构的CSS
忽略细节，我们仍是将注意力集中在大问题上。正如在前文"概述"中提到的，默认情况下页面容器的固定宽度为980像素，页头部分（header）的固定高度为160像素；主要内容部分（content）的宽度为600像素，左浮动；侧边栏（sidebar）右浮动，宽度为280像素。
#pagewrap {
width: 980
height: 160
#content {
width: 600
#sidebar {
width: 280
截至目前的效果演示
目前我们只是初步完成了页面结构的HTML和默认结构样式，当然，并不包括那些与话题无关的细节实现问题。正如可以在中看到的，由于还没有做任何media query方面的工作，页面还不能随着浏览器尺寸的变化而改变布局。
CSS3 Media Query
终于开始说正事儿了。首先我们需要在页面中调用css3-mediaqueries.js文件，来帮助IE8或是之前的版本支持CSS3 media queries：
&!--[if lt IE 9]&
&script src="http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js"&&/script&
&![endif]--&
接下来，我们要创建CSS样式表，并在页面中调用：
&link href="media-queries.css" rel="stylesheet" type="text/css"&
当浏览器可视部分宽度大于650px小于980px时（液态布局）
将pagewrap的宽度设置为95%
将content的宽度设置为60%
将sidebar的宽度设置为30%
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
#content {
width: 60%;
padding: 3% 4%;
#sidebar {
width: 30%;
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10
当浏览器可视部分宽度小于650px时（单栏布局）
将header的高度设置为auto
将searchform绝对定位在top 5px的位置
将main-nav、site-logo、site-description的定位设置为static
将content的宽度设置为auto（主要内容部分的宽度将扩展至满屏），并取消float设置
将sidebar的宽度设置为100%，并取消float设置
@media screen and (max-width: 650px) {
#searchform {
#main-nav {
#site-logo {
margin: 15px 100px 5px 0;
#site-description {
margin: 0 0 15
#content {
margin: 20px 0;
#sidebar {
width: 100%;
margin: 0;
当浏览器可视部分宽度小于480px时
480px也就是iPhone横屏时的宽度。当可视部分的宽度小于该数值时，我们需要做以下调整：
禁用html节点的字号自动调整。默认情况下，iPhone会将过小的字号放大，我们可以通过-webkit-text-size-adjust属性进行调整。
将main-nav中的字号设置为90%
@media screen and (max-width: 480px) {
-webkit-text-size-adjust:
#main-nav a {
font-size: 90%;
padding: 10px 8
我们需要为图片设置max-width:100%和height:auto，来实现其弹性化。对于IE，仍然需要一点额外的工作：
max-width: 100%;
width: auto\9; /* ie8 */
弹性内嵌视频
同样的，对于视频，我们也需要做max-width： 100%的设置；但是Safari对embed的该属性支持不是很给力，所以我们以width： 100%来代替：
.video embed,
.video object,
.video iframe {
width: 100%;
iPhone中的初始化缩放
默认情况下，iPhone中的Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。我们可以使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。
&meta name="viewport" content="width=device- initial-scale=1.0"&
最终效果演示
该范例的最终演示正像我们在本文开始时看到的那样；另外记得，在条件允许的情况下，使用各种典型移动设备（iPhone、iPad、Android、Blackberry等）来检验页面的移动版本。
Media Query JavaScript
对于那些尚不支持media query的浏览器，我们要在页面中调用css3-mediaqueries.js
&!--[if lt IE 9]&
&script src="http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js"&&/script&
&![endif]--&
CSS Media Queries
实现自适应页面设计的关键之一，就是使用CSS根据分辨率宽度的变化来调整页面布局结构。
@media screen and (max-width: 560px) {
#content {
#sidebar {
width: 100%;
通过max-width:100%和height:auto实现图片的弹性化。
max-width: 100%;
width: auto\9; /* ie8 */
弹性内嵌元素（视频）
通过width:100%和height:auto实现内嵌元素的弹性化。
.video embed,
.video object,
.video iframe {
width: 100%;
字号自动调整的问题
通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整
-webkit-text-size-adjust:
页面宽度缩放的问题
&meta name="viewport" content="width=device- initial-scale=1.0"&
浏览 25725
浏览: 1650897 次
来自: 杭州
java实现操作word中的表格内容，用插件实现的话，可以试试 ...
Maven多模块spring + springMVC + JP ...
博主还有wlsvm.zip这个压缩包吗？链接打不开了
f604a33a817e427当前位置： >
jQuery自适应屏幕宽度手机焦点图
特效说明：
一款jQuery自适应屏幕宽度（分辨率）手机焦点图，只适应各种手机屏幕分辨绿焦点图切换网页特效。透明渐变切换，应用简单。支持屏幕旋转自适应焦点图、幻灯片特效。（兼容测试：宽度大于320px手机、移动设备等浏览器）
使用方法：
1、调用CSS样式：
&link href=&css/style.css& rel=&stylesheet& type=&text/css&&
2、调用JS插件代码：
&script src=&js/jquery.js& language=&javascript& type=&text/javascript&&&/script&
&script type=&text/javascript& src=&js/jquery.SuperSlide.js&&&/script&
3、添加HTML代码：
将&!--效果html开始--&......&!--效果html结束--&之间的html和js代码；放在&body&&/body&之间。
一款jQuery自适应宽屏带动画焦点图网页特效，自动播放图片特效，点击左右箭头按钮、底部切换按钮带动画图文切换jQuery焦点图代码下载。……
一款手机移动端响应式全屏左右可拖拽焦点图幻灯片网页特效，动态加载对应的文字内容 当然，它也是支持鼠标拖拽功能，带左右按钮，自动轮播及左右拖拽或点击按钮切换焦点图JS代……
一款jQuery带动画效果自动轮播焦点图网页特效免费下载，该特效带动画效果，左右按钮、索引按钮切换代码，效果非常流畅，兼容IE7，插件支持图片位置的定位以及图片的动画运行速度……
一款jQuery手机触屏左右滑动切换焦点图特效代码免费下载，该焦点图特效支持触屏滑动切换大图，做微信网站或手机方面的webapp网页必备素材代码，有需要的朋友参考下。……
jQuery手机移动端图片触屏滑动焦点图网页特效，该特效基于jquery.event.drag-1.5.min.js、 jquery.touchSlider.js和jquery-1.7.1.min.js等插件制作的图片轮播特效代码，兼容PC端和手机移动端，全屏宽屏……
一款jQuery+html5触屏手机移动端焦点图特效，可点击左右按钮平滑切换图片；可触屏或鼠标拖动左右平滑切换焦点图相册特效。移动端、手机触屏JS焦点图代码免费下载。……
一款兼容PC端/手机移动端可左右滑动（拖动）焦点图网页特效，可自适应宽度、可用鼠标左右拖动切换图片、可在触屏移动设备上左右滑动切换图片；移动端、触屏设备web前端开发必备……
一款jQuery手机响应式设计焦点图网页特效代码，自适应宽屏焦点图，支持左右按钮点击切换，支持添加文字标题。更多焦点图代码请访问科e互联JS代码频道。……
一款带触摸移动端焦点图轮播代码网页特效，PC端自动轮播焦点图、移动端、手机端触摸滑动切换焦点图代码素材。手机端网站制作特效代码。……
一款jQuery自适应全屏带导航的焦点图代码，图文分离、背景分离，酷似HTML5+CSS3特效。网页制作、网站建设js代码网页素材。……
最新更新特效
本站关键词
科e互联版权所有
京ICP备号-1