响应式布局的两种实现形式 - 唐小青 - 博客园
随笔 - 23, 文章 - 0, 评论 - 0, 引用 - 0
所谓的响应式布局，就是设计一个网站的时候，让它满足能同时适应不同的端口，而不用对不同端口设计不同的网页。
实现方式：采用百分比自适应布局
1.原生代码实现。
&& 在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，
因此会用用到自适应的方法。
&& 用原生代码实现的根本在于媒体查询@media的设置。
&&& @media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。
&&& 举例如下：
&&&& @media screen and (min-width:1000px){...}&&&&&&&&&&&&& 对应PC端页面
&&&& @media screen and (max-width:1000px) and (min-width:768px) {...}&&&&&&& 对应平板端页面
&&&& @media screen and (max-width:768px){...}&&&&&&&&&& 对应手机端页面
2.采用bootstrap框架布局
&&&& bootstrap框架布局完成的页面，是自动对应的自适应效果。
&&&& 但是在书写的时候，应该严格按照bootstrap的书写规范，才不会出现怪异性问题。
&&&& 写法举例：
&&&&& &div class="col-md-6 col-sm-6& col-xs-12"&
&&&&& 说明：最后的数字对应该div所占栅栏的列数。
&&&&&&&&&&&&&& col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。
&&&&&&&&&&&&& col-sm-6 代表在平板上也显示div占当前行的一半。
&&&&&&&&&&&&& col-xs-12 代表在手机端显示为当前行的百分之百填充。
&3.还有其他方式，如JQuery和专门做响应式的JS文件，均能实现自适应效果，实现响应式布局。网站设计分析：响应式页面的几个关键组成部_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
网站设计分析：响应式页面的几个关键组成部
&&网站设计分析：响应式页面的几个关键组成部
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢这几天都在修改博客上面的样式。本来用的是d83.0的模板。自己又修改了许多地方，其中自己修改的一些地方在手机里面显示的效果不是很理想，于是想改成自适应的效果。对不是特别的熟练，只能去网上找找案例看了。发现一个不错的文章。写的比较入门，也很仔细。所以拿过来分享给大家。如果还想看图片的案例可以看我找的另外的一篇《》。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在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-/svn/trunk/css3-mediaqueries.js”&&/script&&![endif]–&三、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:只能指定百分比宽度：width: xx%;或者width:四、相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。body {font: normal 100% Helvetica, Arial, sans-}上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1 {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) {
#sidebar {
}上面的代码意思是，如果屏幕宽度小于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的。addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有可以做到这一条，服务器端和客户端都可以实现。我觉得从上面的的一些分析可以学到很多东西，能解决一些CSS3网页设计基本的入门问题，希望也能帮到看到的朋友。转载请注明： &
如果你觉得这篇文章或者我分享的主题对你有帮助，请支持我继续更新网站和主题 ！ or分享 (0)响应式网站设计和网站的布局。
日　标签：
响应式就是如何构建一个基于网站的布局，即调整及媒体查询，所描述的伊桑马科特图像的网站。马科特后定义的技术，响应式设计的框架开始浮出水面，纳入这些原则。大多是基于CSS和JavaScript，许多这些框架都是开源的，免费下载和快速定制。 一些最流行 的今天是引导和基金会，我们将专注于本文中。 作为响应式设计框架走红，一个很大的争论出现了：为什么一个专业的设计师用一个响应式设计的框架？ 互联网辩论愤怒的。许多声明，响应式设计框架是可怕的，那谁也不知道HTML和CSS的唯一的人会永远使用这样的事情。下面是对框架的标准参数：
设计人员可以编写自己的网格系统，他们可能应该如果他们知道任何HTML和CSS。
基于框架的网站加载缓慢。
基于框架的所有网站看起来是一样的。
膨胀是常见的，无论是由于额外的div标签，5000 +行CSS或大JavaScript文件。
而批评者抱怨叫嚣着，响应式设计框架继续增长受欢迎。我认为，这些框架有积极的方面，即使是最有经验的前端Web开发人员，我会在下面列举这些。
该网站为美国现代派保兰德建有基金会。 一个地方的响应式设计框架 一天早晨，我是听白礼的主题演讲在东北的PHP会议。白色是一个PHP开发人员，和他的谈话是在Web和PHP在过去的20年发展的回顾。有一点他做的是，15年前，后端开发人员建立一切从头开始。没有多少是可以在开源世界的时候，和专有内容管理系统（CMS）的成本在几十万美元。如果你想要一个调查，为您的网站，例如，你必须从头写一个。 现在，在2014年，后端开发人员不再这样做。为什么会他们，当他们可以使用的SurveyMonkey的API来创造一些对他们的客户在10个小时，而不是100或1000小时？是的SurveyMonkey的代码最真棒在世界上，最高效，最巧妙的书面和膨胀，免费的吗？我不是一个PHP开发人员，不知道这个问题的答案。然而，API是测试和调试，它运行良好，并准备在你的下一个项目被纳入 - 并具有巨大的价值。 除非你的客户想要的东西非常具体和有足够的资金来资助这样的项目，如白解释说，大多数PHP开发人员会说，有写你自己的调查，由专人在2014年没有很好的理由。 那么，什么是等效的技术，快捷的网站的前端？不幸的是，我们没有之一。 目前，我们有两个选择来创建一个网站的前端。第一个选择是下载一个模板（或主题）。与基于CMS的网站常用的一个主题可能会出现一些颜色的选择和几个变量来进行调整。从有利的一面，大多数主题都是免费的或相对于整个网站的成本非常低的成本。下载一个主题，改变一些颜色和下降的一个标志需要一点时间。 更重要的是，一个好的主题会定期更新，并且它会与文件，使之更简单的修改。在消极的一面，主题可能会被丝毫不少，并没有独特的，它甚至可能使网站看起来像它属于一个特定的CMS。 第二个选择是一个完全定制的解决。平面设计师将聘请来讨论品牌，他们会遍历三种设计和两轮的修订，或许原型直接在浏览器或转换的设计，HTML和CSS，设计与CMS或他们选择的后端集成如果需要，并提供了（希望）完美的结果给客户端。从有利的一面，每个标签将被精确放置，并且代码将完全语义，与脂肪没有一盎司或过量的div被发现。 要做到这一点，不过，开发人员必须训练有素，经验丰富的 - 每当该口径的开发商参与，明码标价上升相应地，把这个项目出来的小客户的金融影响力和显著的大的支出增加客户端。此外，除非额外的美元花在文档（这是不寻常的在我的经验），如果最初的开发者离开，那么接下来开发商必须要弄清楚的代码，以便修改。这是一个额外的成本给客户端。 在哪里下载一个低端的设计之间的中间地带，用于在互联网上，并创造一些高度定制和昂贵？哪里是一个后端开发人员的API或代码库的相同呢？我们能否建立某种形式的大规模定制的前端？ 我们需要能够挖掘到一些预先写好的内容，定制增加将它们合并，并制定一个解决，比罐头主题更加个性化，但不是一个高端解决更少的定制。如果不从头开始，我们就可以节省时间的开发时间和节省下来的钱用于客户端。 我是不是说我们应该抛弃的框架定制的解决？不，当然不是。一个完全定制的解决有它在Web开发世界上的地位，就像罐头CMS的主题有自己的位置。如果您的客户有足够的时间和金钱来达到完美和完全定制的解决是项目完善的方法，那么为什么不呢？ 但很多客户都非常有限的时间和金钱，他们可能无法等待或支付完美。我们能得到的东西，是“相当不错”，而不是？也许不是每个分区将被完全有条件，有可能是数太多其中许多。或许码需要多一点的时间比需要下载。然而，该解决将被记录在案，在积极开发和定制的，它可以迅速建立在超过一个自定义的网站要少得多。没有价值的。 就像我们所掌握的所有其他技术在Web开发领域，一个负责任的设计框架都有自己的肯定和否定，我们需要考虑的问题。
本网站对于希腊餐厅GRK建有引导。 肯定和否定响应式设计框架 注重引导3和基金会5，让我们探索了许多建立你的下一个网站，这些框架中的一个积极的和消极的方面。 浏览器兼容性 调试的浏览器有时需要长达开发网站本身。如果你可以减少花费在调试的时候，你可以节省客户端（和你自己的头发）显著成本。 响应式设计的框架已经过测试，对一组特定的浏览器和设备，从而降低了推出一个网站所需的工作。（测试你不得不做的数额将根据有多少你已经定制的框架有所不同。如果是你，那么只有很少的测试是必需的已经改变了只有几个颜色。如果你已经破解了电网系统，然后测试将需要是广泛的。） 最新版本的引导和基金会支持的Internet Explorer（IE）9以上。有技巧，以使框架在IE 8的工作，但是IE 6和7是不与任何兼容。一般情况下，这些框架也支持其他常见的浏览器，包括Firefox，Safari和Chrome，以及不同组的移动浏览器的最新版本。 不幸的是，如果你想支持的尚未经过测试一个浏览器，那么你可能会发现需要修正的代码，你不熟悉的bug。 自定义文件 引导和基金会有一个包含所有必需的文件，样式和窗口小部件标准下载软件包。有些文件比较大，有几个要下载的文件。一般情况下，文件会以人类可读和精缩格式。 仅仅因为你的选择，附带的样式和JavaScript，支持几十种成分的框架并不意味着你必须下载并整合他们所有。引导和基金会允许您自定义您的下载包，这样你就可以只抢了CSS和JavaScript你需要运行您的网站。这降低了膨胀，并作为结果，减少了下载时间，对框架的公共参数。 以后，如果您想添加一个Widget或风格，你以前被排除在外，您可能需要重新配置包。这是可以避免的，但是，我建议首先开发的网站，无需自定义外观，以确定哪些功能是你所需要的。然后，您可以自定义下载包中包含的代码只有这些功能。一旦框架到位，然后你可以自定义网站的外观。 注：当引导或基金会的下一个次要版本发布时，您需要重新下载自定义软件包。认真记笔记的你有什么，还没有下载，让您可以更新您的文件时，重复上述过程。 CMS的评论家，一个网站的评论内容管理系统，建有基金会。 自定义代码 很可能需要定制一些水平。你可能会想改变颜色。如果你是较有经验，你不妨破解电网系统。 只是因为你使用了一个框架，并不意味着你的网站有看起来像之一。您可以自定义CSS来给网站自身的独特的外观，无论是使用更小（引导）或萨斯（用于基金会）或仅仅是从头开始编写CSS。 在那进来引导开箱风格相当广泛，并且假设是，你将不会被广泛改变它们。您可以覆盖的CSS在一个单独的样式表或通过使用较少或萨斯文件。不幸的是，小文件，供LESS和萨斯文件，所以你需要找出许多代码在你自己。内置的自举了丰富的款式使其成为经验的前端Web开发的热门选择。（请注意，引导已在过去一个月内发布萨斯文件。在此之前，只减档可供它。） 基金会拥有较少的款式开箱即用。虽然你可以用一个单独的样式表自定义，基金会是更有效地通过其广泛的萨斯文件（该文件提供）定制。用更少的CSS来覆盖，就可以更轻松地构建一个完全定制的外观。然而，经验不足的前端开发人员可能会发现，因为CSS的更多的知识基础更加难以处理和萨斯必需的。 引导和基金会也可以，甚至在下载定制，通过简单的修改LESS和萨斯变量。在引导时，自定义选项去的网页，而只有极少数的变化，可向基金会。但是，如果你不熟悉小于或无礼的话，这是一个快速和肮脏的方式来定制框架的外观。 同样地，你可以利用JavaScript的提供自定义功能。引导和基金会的最新版本的jQuery需要定制部件的工作。 如果您使用的引导和基金会的专用屏幕，那么你的下载包将被定制。当每个框架的下一个次要版本发布时，您将需要一个新的包一遍自定义变量。 需要注意的是基金会的JavaScript包括了很多精心布置的分号。引导含有非常少的分号。这会影响一些开发商的首选框架。 无障碍 无障碍正在成为开发商越来越重要。这两个框架提供有效的HTML，但是让我们考虑无障碍超出有效的HTML。 引导已取得了一些进步的帮助下的Joomla。的Joomla，一个开源的CMS，结合引导到版本3。的Joomla的开发者有一个长期的承诺，可访问性，并且他们不想引导，以减少CMS的可访问性。因此，在引导3，你会发现ARIA代码和屏幕阅读器，只有风格，在其他辅助功能的改进。 基金会，不幸的是，并没有优先无障碍迄今。它不来与ARIA代码或屏幕阅读器，只有风格。Zurb曾表示，但是，它想做更多。 Webflow的，一拖和拖放的者，建有引导。 结论 无响应的设计框架是完美的。对于执行各种作业的工具，额外的代码需要作出这样的工具柔性您的需求。当然，完全自定义的代码很可能是一个网站不是一个框架更有效。 一些前端开发人员告诉我，他们有自己的网格系统，CSS和他们保持自己的网站的JavaScript组件。当然，没有什么是不对的做法。但你必须自己维护的代码。一个流行的框架，最大限度地减少需要维护和测试。 我呼吁我的同胞前端Web开发人员重新考虑使用一个负责任的设计框架。的前景，把它看成是一种生产力工具，你可以在全部或部分借鉴。刚下载的网格系统，或与所有的群众演员采取全包。也许用一个框架只为原型设计的目的或实际重用的框架，你在自己的项目中熟悉的部分。 框架的目的是获得一个网站运行迅速，以最小的调试。定制的挫折感出它看起来完全不同，或者改变短短的颜色和完成。但是你使用它，你就会有一个可以很容易地传递给其他开发人员进行维护和调整，而且看起来合理，功能以及标准化，文档化的代码。该代码是不完美的，当然，但它是相当不错的。它减少了建立一个网站所需的时间，这将使得该网站花费少一点，太。 世界上肯定有空间，完全定制的网站。我的意思并不是建议放弃他们支持大规模定制的。然而，下一次客户端需要更多的在他们的设计有点，但对于捉襟见肘的预算，也许这是一个好主意，考虑一个负责任的设计框架，毕竟。您可能会发现它是一个有用的工具在你的军火库，快速原型设计，测试，甚至生产代码 - 一个扩展您的产品系列，使客户满意。 本文作者来自公司-传诚信，转载请注明出处：北京传诚信（）
本文链接： 转载请注明！
北京地区咨询热线
武汉地区咨询热
全国免费咨询热线
400-697-8610不要再谈“响应式”了，“连续性”才是王道
稿源：简书网
译者注：&响应式&实乃老生常态，在四年前笔者就开始设计和开发此类网站，对这个词再熟悉不过了，在前几年一个稍新一些的词&适应式&（adaptive）应运而生，我们也经历了视觉样式到技术端的变革，一次次地把手机、平板或桌面各自架空来剖析，却大多忽视了它们之间在实际情境中的彼此联系。
不要再谈&响应式&了，&连续性&才是王道
原作者：PatrickQueisler
译者：励定洲
设计一个响应式网站或者软件是入门容易，但学精很难。目前我们可以看到已经有成千上百个很棒的解决方案了，但他们都存在一个共性：仅仅优化了在特定设备上的界面的显示。
你可以在你的台式电脑或笔记本和你的手机上随便打开一个网站试试：可能在不同的设备上都能有很好的显示，但是这些区别之间并没有关联性。你所看到的无非是一个能够获取信息的被优化的界面。
如果软件能够知道我要做什么会不会很酷？
比如我正在上班途中的火车上在手机上听着Spotify的音乐。软件的界面看起来并没问题。考虑到他们能把所有的特色功能都放进一个应用里，我还可以说它做得很棒。
但当我抵达我的办公室，倒了一杯咖啡并和同事们聊了会天后，又一次在我的笔记本上打开了Spotify。我使用与手机上一致的账号登陆，但软件并没有记住我之前在手机上听的是哪首歌，它甚至不知道我打开的是什么播放列表。
因此我不得不重新开始一遍：选择播放列表、搜索歌曲并且从头开始播放。这或许在听音乐时还不那么烦人，但如果你听的是有声书籍的话会觉得这是一种折磨。
Wouldn&t it be nice to continue where you left on another device?
对于大多数网站来说也是一样的。我设计过很多电子商务方案，当然了他们都是响应式的。当用户决定要从你的商店购买东西的时候你应能有所响应。比如可能在他通勤的路上、办公室里或者在家里。我们不知道，所以我们提供了一个总是适配的解决方案。但&响应式&只是基本的&合乎逻辑&而已，如果用户通勤的时候手机上浏览你的方案、办公室里又了解了一些，傍晚回家的时候决定进行购买，那么每一次他都要一遍又一遍从头来过。如果软件能够知道谁正在看着屏幕，并记住、甚至预测对方想做什么，那么他它就能提供一个符合用户期望的更直接的解决方案。
是的，这可能听起来有一点玄幻，好像是来自少数派报告的广告，但这确实是谷歌和亚马逊每天都正在做的。
回到Spotify的话题：在苹果电脑和手机的操作系统里有一项叫&连续性（Continuity）&的功能可以做到：简单地从你离开的地方继续。
我们作为设计师的角色需要进化
我们作为设计师有时候会被一些诸如&在浏览器里设计&或者特定、严苛的styleguide所质疑和约束，但我们的角色正在发生改变。并不是说我们要再一次去创造所谓全新的用户界面，而是创造一种体验。
这包括了线框图、动效、全新的工作流程以及你、我都可能未曾涉猎的其它方面。这是一个挑战，一个创造更佳产品、为人类带来价值的挑战：帮助现实中的人们解决实际的问题。
解决那些尚无人留意的问题的动力不断推动我前行，而那正是创新之由来。
延伸阅读：
有好的文章希望站长之家帮助分享推广，猛戳这里
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页