建立一个网站的艺术是一个崇高但具有挑战性的艺术。随着移动设备的出现，它变得更加具有挑战性。我仍然清楚地记得史蒂夫·乔布斯(SteveJobs)引入新发明的那一刻。电话大张旗鼓的。这个药片不久之后，“移动网络”的概念开始受到重视。
移动设备(电话和平板电脑)的销售额目前比传统的个人电脑高出6比1以上。和移动网络流量现在约占所有互联网流量的25%。如果两年前你不认为你需要一个响应能力强的网站，那么在今天证明这一点就变得更加困难了。响应式网页设计这不是没有批评，但当移动用户到达一个没有反应的网站，迫使他们-尽管不情愿-不断放大和缩小，并滚动到另一边。
建立一个响应性的网站不一定是一个零和命题，你可以忍受艰难过程中的“苦果”，以此来证明拥有一个在移动设备上看起来和感觉良好的网站的“甜蜜感觉”是正当的。它可以是“双赢”，也是必须的。
临汾公司网站开发在本文中，我将向您展示一种方法建立响应性的网站要快得多而不是现在使用Restive.js来简化您的工作流程并完全消除对媒体查询的需求。
响应式Web设计中的问题
响应式网页设计已经成为使网站适应移动设备的主流技术。由于这些设备屏幕大小不一(尤其是智能手机)，以及在较小屏幕上浏览桌面网站的尴尬，毫无疑问，“响应”能力对于确保在线访问者能够享受网站的乐趣至关重要，不管他们使用的是哪种设备。
然而，传统的响应性网页设计至少使网站的建设过程具有一定的挑战性，原因如下：
对于黄金时段来说效率太低
*建立一个响应性网站需要太多时间。在网页设计的黄金时代(在移动设备之前)，唯一的主要问题是浏览器兼容性(或InternetExplorer兼容性，以便对其他浏览器公平)。添加所有的挑战，使您的网站适应多种屏幕大小的组合，你有相当大的挑战。我记得我读过有人问过的一个问题的答案建立一个响应性网站需要多长时间？
发现这些反应很有说服力。一位受访者说，在10%至50%的额外时间。而另一个人则认为，这一数字要高出25%至75%的额外时间。这种效率数字只会损害收养，特别是在时间与成本挂钩的情况下。对主流来说太贵了
：我还没有遇到这样一个职业：花更多的时间做同样的工作，收费更低。“加班”的整个概念几乎概括了这一点。如果今天设计一个网站(预计会有响应性)平均需要25%到50%的时间来完成(更不用说测试和持续维护)，我不认为一个响应网站比你的传统桌面网站更便宜。因此，成本的影响将引起大多数网站所有者的恐慌，特别是当建设旧网站并不便宜的时候。这也使网页设计师陷入困境，因为无论是按小时计费，还是固定的定价模式，这些额外成本都将转嫁给客户。干扰太大，企业不能不犹豫
今天的大多数网站已经不再仅仅是HTML+CSS+Javascript了。有的使用PHP、ASP、Rails等应用程序引擎，有的使用WordPress、Drupal等内容管理引擎。然而，有些功能是由连接的API和其他外部系统提供的。例如，如果您的网站为客户提供了一个安全的个性化门户，那么决定响应的讨论要比HTML和CSS标记大得多；这将涉及对如何通过移动平台提供服务进行深入的审查，这可能会导致您的整体代码库发生非常大的变化。对于一个在很大程度上依赖于在线渠道的企业来说，一种迅速而开拓性的情绪很容易被一个以谨慎为特征的人所抢夺。行业标准技术不够健壮。
：媒体查询已成为当今支持网站响应能力的主要技术，但它们是否足够强大，以加快移动友好网站的采用？！现在，媒体查询远不是直观的，有时令人困惑和沮丧，有时表现得不像你认为的那样。这是相当明显的，当你设计一个网站的形式-因素，如桌面，电话和平板电脑。例如，如果我已经为这三个设备类别设计了布局，那么使用媒体查询来实现这一点有多容易呢？！
我知道每个争论都有两面性。有人可能会说，响应性网页设计花费太多时间或成本，是因为从业者“做错了”。有些人可能会说，媒体查询工作得很好，应该足够快速、方便地将响应性的功能添加到网站中。
然而，即使事实有争议，总趋势也是不可否认的。在最近的一份报告中-2014年移动网络状况-我的公司[动荡不安]最近发表的，我们发现只有15%的全这个Fortune 1000网站成为响应性到单个URL地址空间，即不重定向到专用移动Web地址。由于这些公司并不完全缺乏资金，我们可能可以排除成本作为低采纳率的一个因素-但我们不能排除响应性Web设计工作流的相对低效。
现在，我并不是一级方程式赛车的权威，但我可以肯定地说，塞巴斯蒂安·维特尔(Sebastian Vettel)不可能在普锐斯(Prius)的车轮下赢得一场大奖赛(今天、全盛时期或任何一天)，不管他作为一名车手有多棒。如果你要赢得一场所有的赛车都是兰博基尼和法拉利的比赛，你将不得不在同样激烈的比赛中“踏板对金属”。同样，如果你想更快地构建响应性网站，你需要一个比你现在使用的更快的工作流程。
响应式Web设计的另一种方法
让你的网站看起来，感觉和表现良好的每一个网络设备应该是你的最终目标，你的所有网页设计策略应该集中在这一点。你可能不会在今天或明天到达那里，但这应该是你不断努力实现的理想。移动设备在这里，他们不会去任何地方，更多的设备类别可能即将到来。这就是新的现实！因此，今天设计一个网站是一种失败的策略，它的思维方式是让网站响应是一种“额外的附加”。让我们面对事实：事实并非如此依附再来一次!
在默认情况下，所有的网页设计都应该是“响应”的。所有网站都必须适应需要访问的不同环境。不管你是从一个网站的桌面版本开始，你都必须停下来考虑你的设计和功能在其他设备上是否会像预期的那样工作，即使版面的某些项目被重新调整或重新排列，或者某些设备没有你想要的那么现代。如何以最快、最直观、最无压力的方式做到这一点，是当代网页设计的“圣杯”。这一切都是从一个流线型的设计工作流程开始的。
内联CSS响应性
如果今天开发响应性网站花了这么长时间，也许我们应该回到手机(智能手机)和平板电脑之前，尝试找出到底发生了什么。那时我们仍然有HTML和CSS，就像我们今天所做的那样。我们也有媒体查询，就像我们今天做的一样，尽管它们是为了其他特殊的任务，如打印和可访问性。因此，随着移动设备和媒体查询技术的出现，传统Web设计工作流程的效率基线被打破，成为响应式Web设计的首选技术。
我们需要回到一个设计工作流程，其中的标准是内联CSS规则是100%负责响应Web设计的实现。我的意思是，当我想在布局上实现响应性增强时，我应该能够在我的主要CSS标记中直接定义该增强。
所以我应该可以这样做：
#my-element-id {/* Styles */} //my desktop style rule.phone #my-element-id {/* Styles */} //my general smartphone device style rule.tablet #my-element-id {/* Styles */} //my general tablet device style rule而不是被困在这上面：
#my-element-id {} //my desktop style rule@media only screen and (min-width : 320px) and (max-width : 480px) {/* Styles for some mobile devices */}@media only screen and (min-width : 321px) {/* Styles for some other mobiles */}/** ...And yet more Media Query Directives **/是的，媒体查询是CSS，但在这种情况下，它们似乎是一个严重的生产力障碍，主要是因为它们将引入到CSS中的所有分布式和不合逻辑的“标记领域”。凭借@media指令，您曾经的顺序代码库现在被分割成多个区域，每个区域都必须单独管理和维护，通常会带来不那么愉快的结果。
让我们来考虑一个真正的网站项目，以正确地看待这一点。
一个真实世界的响应设计方案
让我们假设您正在设计一个简单的网站。您只设计了桌面布局，并已完成HTML和CSS标记。您确实打算让站点完全响应。基于您的期望，您希望平板电脑用户与智能手机用户有一些不同的体验，因为与手机相比，物理尺寸的差异。
您可以在这里查看我们网页的演示。
很明显，我们使用的是一个中心和固定宽度的模型，宽度为960px。由于我们的桌面版本没有重大的挑战，我们现在想添加响应性增强，特别是电话和片剂.
首先，让我们决定当我们的网站遇到移动设备时我们想要发生什么：
- 如果设备是移动设备，例如电话或平板，我们希望从固定宽度的布局转移到流体宽度布局。另外，我们要在每一边，也就是左边和右边，增加10 px的填充。
- 如果是移动设备，我们希望缩小徽标的大小。由于我们的标志是文本，我们希望平板电脑字体尺寸减少10%，手机字体减少20%。如果设备是手机，我们还需要以标识为中心，如果是平板电脑，则需要右对齐。
- 我们想要折叠主菜单从水平到垂直，如果设备是一个电话(在任何一个方向)或平板电脑在纵向方向。当菜单垂直折叠时，我们希望降低单个菜单项的高度，同时我们也希望放置横行分隔器来标定所述菜单项。
- 我们想隐藏所有手机的边栏内容。我们也希望侧栏隐藏所有的平板电脑在肖像方向，但在景观时可见。
因此，这是一个简单的网站，我们只有4个响应增强，我们希望实现。
使用媒体查询方法，让我们临汾公司网站开发看看是否可以将这些功能添加到我们的网站中，并使其具有响应性：
/** Responsive CSS - Using Media Queries **/@media only screen and (max-width: 320px) {
/**phone in portrait CSS rules here**/
section {width: 100%; padding: 0 10px;}
header #logo div {font-size: 320%; text-align: center; margin: 0 auto;}
header #menu-container {height: auto;}
header #menu nav ul {height: auto;}
header #menu nav ul li {float: none; width: auto; height: 40px;
line-height: 40px; border-bottom: 1px dashed #444;}
#content #main{float: none; width: 100%;}
#content #sidebar{display: none;}}@media only screen and (min-width : 321px) and (max-width : 480px) {
/**phone in landscape CSS rules here**/
section {width: 100%; padding: 0 10px;}
header #logo div {font-size: 320%; text-align: center; margin: 0 auto;}
header #menu-container {height: auto;}
header #menu nav ul {height: auto;}
header #menu nav ul li {float: none; width: auto; height: 40px;
line-height: 40px; border-bottom: 1px dashed #444;}
#content #main{float: none; width: 100%;}
#content #sidebar{display: none;}}@media only screen and (min-width : 481px) and (max-width : 768px) {
/**tablet in portrait CSS rules here**/
section {width: 100%; padding: 0 10px;}
header #logo div {font-size: 360%; text-align: right;}
header #menu-container {height: auto;}
header #menu nav ul {height: auto;}
header #menu nav ul li {float: none; width: auto; height: 40px;
line-height: 40px; border-bottom: 1px dashed #444;}
#content #main{float: none; width: 100%;}
#content #sidebar{display: none;}}@media only screen and (min-width : 769px) and (max-width : 1024px) {
/**tablet in landscape CSS rules here**/
section {width: 100%; padding: 0 10px;}
header #logo div {font-size: 360%; text-align: right;}
header #menu nav ul li {width: 20%;}
#content #main{width: 65%;}
#content #sidebar{width: 33%; padding: 0 0 0 2%;}}虽然这个网站看起来很简单，但上面的代码总共花了我20分钟才使我合理化和设置起来(我的意思是…)。我能在一半的时间内得到汽车保险？！这个标记看起来可以工作，但是看起来我们将面临一些主要的操作挑战，这些挑战是由媒体查询重叠带来的意想不到的后果造成的：
- 如果有人使用具有SVGA分辨率的桌面监视器(1024x768)，他们将获得“平板电脑面向景观模式”的流畅宽度版本。也许不是一个大问题，但你可能会希望他们得到桌面版本。
- 市场上有许多手机，它们的横向宽度大于480像素，比如iPhone 5。这意味着，如果设备是面向横向的iPhone 5，我们为“平板电脑在纵向定向模式”指定的媒体指令将被应用。这绝对不是我们所希望的。
- 类似于第2点，也有很多流行的手机，在纵向方向宽度大于320像素。因此，“面向平板电脑的手机”的媒体指令将适用于任何符合这一标准的手机。
- 还有许多广受欢迎的平板电脑，其横向宽度大于1024像素。以GoogleNexus 10(平板电脑)为例，它的设备独立像素尺寸为800 px，宽1280像素。改变我们的最大宽度值从1024到1280应该解决这个问题，但现在一些笔记本电脑将得到的外观和感觉不是特别的。
我可以继续，但我认为重点是。
这是一个非常简单的网站，我们试图在这里建立。像我们清楚地描述的四个响应性增强一样简单的东西不应该真的是设置、调整和测试的麻烦。很明显，测试这个网站，并调整它，可能需要一个小时，如果不是更多。对于一个更复杂的网站来说，当你完成所有的测试迭代时，你的大脑和你的身体会因为你花在StackOverflow上的所有时间而感到疲倦，等等，试图从“媒体查询调整地狱”中找到最好的方法。我们甚至还没有为谁来维持这一切而抽签呢？！
对不起，我真诚地向整个响应式的网页设计行业和所有相信媒体查询是自HTML+css以来网页设计中最好的事情发生的人道歉，但我只是简单地不可能再拿这个。我看过媒体查询…我真的很想全心全意地喜欢他们，…我失败了。我不介意成为少数几个反对这台机器的人之一-效率极低-“机器”。只要有一个更好的，更快的方法，以建立响应的网站，及时。
见Restive.js
背后的前提Restive.js很简单：使用较少代码的Go响应。它是一个jQuery插件(或者框架，如果你愿意的话)，它可以帮助你几乎立即向一个网站添加响应特性。它做了一些幕后的繁重和聪明的DOM操作，给您更多的灵活性。它有很多特性(您可以在自己的时间进行探索)，但是在构建响应网站的上下文中，它使您能够内联地定义所有的响应式CSS标记。
安装它很简单，在我们特定的情况下安装和设置它所需的东西大约有10行代码+标记总数。
<!-- Install jQuery version 1.7 or higher --><script type="text/javascript" src="jquery.min.js"></script>
<!-- Install Restive.js --><script type="text/javascript" src="restive.min.js"></script>
<!-- Configure Restive.js --><script>
$( document ).ready(function() {
$('body').restive({
breakpoints: ['10000'],
classes: ['nb'],
turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait,is_landscape=landscape'
});
});</script>js具有大多数jQuery插件的基本格式。在上面的代码+标记中，我们定义了3个选项，“断点”、“类”和“turbo_class”，我将简要解释它们的作用。
breakpoints和classes是Restive.js中的主要选项。它们所做的是设置声明的断点范围，然后将类应用到给定的选择器，因为我们网站上设备的视口宽度与该特定范围相匹配。所以如果我们确定breakpoints: ['240', '320']，和classes: ['240-css', '320-css']，插件将设置0到240像素的断点范围，241到320像素的断点范围，然后添加类。240-css到<body>标记(这是我们的选择器)，如果设备视口宽度下降到0到240像素之间，它将添加320-css如果视口宽度在241到320像素之间。这就是这两种选择是如何携手并进的。
turbo_classes是Restive.js的一个特殊特性，它添加类(除了在classes我们的<body>当满足某些预定义的条件时标记，例如，当设备是移动设备时，当设备是平板时，等等。总共有9种具体情况。现在，我们用的是5，因为这就是我们所需要的。例如，is_landscape=landscape将告诉插件添加类。landscape到<body>如果设备处于横向方向，并且Restive.js是有状态的，则如果设备切换到纵向定向，则也将删除该类。
在我们的特殊情况下，我们不需要传统的断点，因为我们主要关注的是形式因素。因此，我们将简单地定义breakpoints: ['10000']，和classes: ['nb']若要创建与所有设备匹配的0到10，000像素范围，请执行以下操作。然后我们简单地使用turbo_classes应用与我们的愿望相关的特定课程。
因此，既然我们已经设置了所有这些，并且知道Restive.js将处理所有所需的DOM操作，那么我们只需将以下CSS规则添加到现有的标记中
/** Responsive CSS - Using Restive.js **/.mobi section {width: 100%; padding: 0 10px;}.mobi.phone header #logo div {font-size: 320%; text-align: center; margin: 0 auto;}.mobi.tablet header #logo div {font-size: 360%; text-align: right;}.mobi.phone header #menu-container, .mobi.tablet.portrait header #menu-container {height: auto;}.mobi.phone header #menu nav ul, .mobi.tablet.portrait header #menu nav ul {height: auto;}.mobi header #menu nav ul li {float: none; width: auto; height: 40px; line-height: 40px; border-bottom: 1px dashed #444;}.mobi.tablet.landscape header #menu nav ul li {float: left; width: 20%; height: 60px; line-height: 60px;}.mobi #content #main{float: none; width: 100%;}.mobi.tablet.landscape #content #main{float: left; width: 65%;}.mobi #content #sidebar{display: none;}.mobi.tablet.landscape #content #sidebar{display: block; float: left; width: 33%; padding: 0 0 0 2%;}就这样！简单，直截了当，直观，和内联标记，使我们能够轻松、快速地实现我们想要的响应特性。如果您想针对所有移动设备的css规则，只需预先准备。.mobi按照现有的规则。如果你想做同样的事情，但只对定位在纵向上的手机来说，你只需要准备好。.mobi.phone.portrait。这种方法使您能够以最快的速度实现几乎所有您想要的响应特性。
那么Restive.js如何知道什么是电话什么是药片？!嗯，这个插件内置了先进的设备检测。有多精确？！嗯，我不得不说99%的准确性，因为我还没有在所有的移动设备上进行测试。但是，我已经在所有的移动设备上测试过BrowserStack，以及几乎所有的当代设备诺基亚设备实验室例如诺基亚Lumia和Asha系列，具有100%的准确性。而且，Restive.js只会随着时间的推移而变得更好，因为对它进行了更多的更新。
这种方法的主要好处在于测试。与处理媒体查询不同的是，您不需要在过多的移动设备上进行测试。你所需要做的就是选择一个受欢迎的电话[或仿真器]，如iPhone 4或三星Galaxy；平板电脑(如iPad 2)，仅此而已。你甚至不需要真正的设备，你可以使用类似谷歌Chrome的仿真器(关于响应性网站测试的更多信息，请参见下文)。您需要在多个设备上进行测试的唯一原因只是出于好奇，而不是出于必要。
此外，这种方法的一个主要优点是代码/标记维护。我们前面突出显示的安装Restive.js所需的初始Javascript代码实际上是“设置并忘记”；除非您想要添加额外的内容，否则永远不需要维护它。turbo_classes混合的物品。对于CSS标记，任何人都可以维护它，即使他们没有真正地编写它；您不需要弄清楚某人试图做什么，它是非常清晰和简单的。
关于测试响应性网站的快速说明
如果你的网站没有适应当您调整桌面浏览器窗口的大小时，这就自动意味着它没有响应。在我们推出Restive.js网站之前，我不知道这是件大事，很多人指责我们是一个响应性插件，而实际上没有一个响应性的网站。当然，如果这是真的，那将是令人难以置信的讽刺。我只能冒险猜测，这些可爱的人是被这个经常使用的，但非常不准确的网站检查误导。
临汾公司网站开发确定网站是否具有响应性的最佳方法是不通过调整桌面浏览器的大小，但使用移动设备仿真器。在动荡不安的博客上，有一篇文章突出了用仿真器方法测试响应性网站的更好方法。它更准确，也更专业，所以我恳请你放弃调整浏览器窗口习惯。
Restive.js缺点
是的，Restive.js极大地简化了您的工作流程，但是这种简单性需要花费很小的代价，我们将在这里进行回顾：
- .js是一个
jQuery插件
因此，在使用jQuery之前，必须加载jQuery。如果您的站点已经没有使用jQuery，这将是另外两个HTTP请求。就字节而言，Restive.js增加了大约21千字节(小型化+GZibad)。因此，如果将jQuery的大约33 KB(小型化+Gzip)相加，那么总额外的有效负载就会增加到大约55 KB。考虑到平均网站的大小超过1.5兆，这是一个小百分比的总有效载荷，但它仍然是一些。 - 就性能而言，Restive.js是
技术上
不如媒体查询快。然而，我们在这里讨论的速度是以毫秒为单位的，只有最有学问的铯原子钟才能分辨出来。在我为两个页面做的简单测试中，我使用WebPagetest
，媒体查询页面的“第一次视图”加载时间为0.497秒，而“重复视图”的加载时间为0.942秒；对于“重复视图”，结果分别接近0.314秒和0.375秒。Restive.js的速度足够快，以至于您不会注意到它确实存在。
响应框架比较
Restive.js并不是帮助您更快地构建响应性Web设计的第一个框架，我为此感谢上帝，因为这个问题不可能没有激发任何人去做一些事情。目前有许多流行的框架可供使用，例如自举, 基础, 骨架和其他人。所有这些平台做不同的事情，这将最终取决于网页设计师选择最好的一个工作。
这些其他响应性框架与Restive.js的主要区别在于后者不使用媒体查询。-因此，它不受所有现有挑战的影响。而且，这些框架圆孔你进入一个特定的设计主题，很难保持你的网页设计的独特性，除非你愿意花更多的时间定制UI组件等等。另一个不同之处是，这些框架中的一些会给您带来负担：仅引导就需要120 kb的CSS标记，如果您只需要响应性的话，这可能会造成太大的损失。
Restive.js更多地针对的是纯粹主义的网页设计师，他很乐意用HTML和css构建一个完整的网站(不需要使用任何一体化框架)，但他只需要克服响应性的实现障碍而不费吹灰之力。我们不要忘记，仍然有很多网站没有响应性，通过使用Restive.js添加所需的响应特性来调整它们比使用前面提到的一些框架做同样的工作要快得多(我将在随后的文章中证明这一点)。
在结束，但向前迈进
临汾公司网站开发为桌面环境设计网站是一项相对例行的任务，多年来，网页设计师一直在尽他们所能来优化他们的工作流程，使之达到这个标准。移动网络设备的引入对这些工作流程造成了严重的干扰，这不仅是因为学习曲线，还因为媒体查询方式有些笨拙和效率低下。诚然，某些熟练的媒体查询从业者可以在较短的时间内完成很多任务，但对于大多数人来说，这种普遍的低效率仍然存在。
Restive.js提供了一种工具和技术，可以在短得多的时间内构建响应性网站，并且对长期建立的设计工作流几乎没有任何干扰。为了提高效率，规范响应性的网页设计工作流程将大大有助于快速创建我们希望在任何地方工作的网站。为这件事早一点而不是晚一点。
