断点和济南网站建设的未来

当iPhone出来后，2007年，其网络浏览器的已故伟大的史蒂夫·乔布斯演示了不那么微妙的印象，苹果是不是太忐忑关于它的用户捏缩放和刷卡滚动作为浏览的一部分经验。响应济南网站建设网页设计的目的是通过巧妙地运用灵活的网格，流体布局，当然，媒体查询来解决这个问题。

然而，响应网页设计已被证明是在有些意想不到的后果的法律为例，用的倒行逆施非预期效应是断点偏执之一。但即使没有不正当影响的媒体查询施加在选择这些断点，它更内省，这些可能不是我们要找的机器人后，洒在你。

在这篇文章中，我们将着眼于超出屏幕大小断点，并探讨不同的可能性和实际的方法来使用它们来在网络上建立真正的自适应体验。

动态阈值

一个阈值是该点或在哪一级的东西开始或变更。阈值可以发现，觉得几乎无处不在物理世界：停在红绿灯前，选择脱脂奶代替三奶比全脂，二糖，转而选择粗鲁的茶杯骑在迪斯尼世界，等出

阈值定义我们，因为他们定义的动作和行为决定结果 。如果能够确定正确的门限设置您的课程更好的结果，尤其是当你确切地知道哪些需要每个阈值内完成。这是类似于做正确的事情在正确的时间。

我们的远见概念化 – 并启用 – 新门槛那里有没有将开辟的行动相提供一个能与成果的新境界。的自由和灵活性，我们从这个收购将不仅有助于满足我们与生俱来的欲望增量awesomization，这将推动我们创造更好的网站，提供更好的用户体验。

今天的断点

在今天的网页设计，我们注视的最阈值与几乎完全屏幕大小。在过去几年中的主要挑战是设计用于移动设备，而随着屏幕尺寸是显而易见的焦点，我们的主要目的是要适应我们的网页布局，以配合环境目标的具体显示特性。

在响应网页设计，定义这些断点的主要方法是通过设置媒体查询。

 @media screen and (min-width: 240px) and (max-width: 320px){ body { background: red; } }

上面的标记清楚地识别两个阈值（240像素和320像素）构成的范围内，其中一个动作将被触发（在这种情况下，改变背景色为红色）。这在概念上非常简单。

美杜莎查询

“当我们增加人的能力来完成自己的任务，我们应该小心，不要无谓地削减他们能做什么。”

– 杰里米·基思

媒体查询，事实证明，是非常刚性的。通常情况下，你不得不使用断点的方式是不完全直观，也不内嵌核心的设计诉求。换句话说，你必须适应你的设计愿望的能力。所以，你可以有你自己的阈值，一个充满活力的想象力，但更可能媒体的质疑不会让你申请他们，你设想的方式。

媒体查询的捍卫者应该明白，效率是什么使任何有效的努力值得称赞。花几分钟甚至几小时扭捏那些讨厌的指令，然后不得不重新调整他们要进行调整每一次这简直是一个递归的噩梦。这有什么不妥基于移动设备（如智能手机，平板电脑等）广泛的分类设置断点？！

在文章“ 设计的断点，“斯蒂芬干草建议定义基于设备类断点。由几个断言的带动下，我踏上了一个小型研究项目，后来我转换成博客文章就证明了这对还是错。而在这我是否最近进行的一项民意调查媒体查询应针对设备类，约54％的受访者表示肯定。但没有直观的方式来做到这一点的媒体查询，即使你想。

在我的愚见，从网页设计师的角度来看，媒体查询的功能集是不完整的。它是如此，因为设计师有想象力和食欲有更多的断点比媒体查询目前可以提供（也许永远会在未来的）。

新断点

正如前面提到的一点，我们找到并设置新的门槛的能力将决定我们的概念化，我们可以设置一个触发新的行动能力。通过这样做，我们可以引入更多的调整到一个固有的静态和不灵活的环境。

在语境网页设计断点

明天的网站有超过响应 – 他们必须是上下文了。的灵活性和流动性这些概念必须超越的屏幕尺寸。一个尺寸适合所有网站的时代将要走到尽头，并通过网站也适应用户的需求和期望所取代。

要启用此功能，我们必须概念化多个阈值，但首先我们需要找出哪些参数来追踪。在尼克·芬克的精辟演讲“ 的语境网络，“他强调了在网页设计方面的四个方面： 用户，任务，环境和技术 。当然，所有四个为外推法的宝库，但我们应该真正关注？

我们可以问数以百计的有关用户，他们的任务，他们的环境和什么样的技术，他们可以访问的问题，甚至上千。然而，我们必须对我们目前的和公开的能力立足这些问题，以获得对上述四种参数的数据。一些可能的问题可能是：

什么是用户的物理能力？
如果用户是视障或听障，我们将需要增加更多的辅助功能，将提高他们的经验。
哪里是用户的大致位置？
知道哪里是用户为我们提供了他们的文化，经济状况，人口，等一个好主意
现在是什么时候在用户的位置？
人们通常习惯的动物，而且更有可能会在某个时间执行某些操作。
什么是用户的设备？
一个电话是不是平板电脑，以及平板电脑不是PC。不同的设备具有不同的能力和将被用于不同的任务。
什么是用户有亲和力？
哪些用户喜欢（和不喜欢的）将在帮助我们优化和交付内容发挥强有力的作用。

有很多方法可以与当今的浏览器中可用的技术回答上述问题。如果没有，那么我们真的需要更加努力地工作，以建立他们的，特别是考虑到一个问题，同样重要的辅助功能。

那么，我们如何设计一个网站是上下文？如何将我们想象中的断点上下文意义？这里有一个场景。

让我们假设它是在早上6:00，和你的闹钟响起。你架着你的厨房弄点早餐，准备和标题出去打工之前。你看中了鸡蛋，但你打开冰箱，也没有鸡蛋。所以，你看中别的东西，但你想订购一些杂货，让他们随时可以拿起自己的方式下班回来。你火了一个非常大的百货连锁店的网站从您的Internet连接的冰箱来完成这件事。

你留下深刻的印象，只是因为这个网站是响应？为得到最好的交易在电子给你一个优先在这一点？难道你真的想提醒的是，有些你“最近浏览”在几个项目中上述网站均林肯日志和一个蜘蛛侠牙刷架？我的意思是，这是上午06时18分，和你从冰箱浏览。是否需要一个火箭科学家弄清楚，也许杂货项目应该是一个值得一类优先次序？

我敢肯定有很多其他情况就是这样，而且很容易的人谁不熟悉Web技术得到沮丧，怎么网站似乎仍然达不到他们的期望。但对于我们这些谁做的，我们应该仍然可以找借口，或者我们应该尝试在信封推进一步？

新方法

“媒体查询允许作者以测试和用户代理或显示设备，独立于所呈现的文档的查询值或功能。”

– 编者草案，W3C（2014年6月3日）

我最近细读了“ 媒体查询4级 “规范草案获得那里的东西是领导的感觉。我必须说，我不是很高兴能与方向，那里只是似乎并没有太大的创新在这里。

从文档的抽象，我们得到一个什么样的媒体查询是作为一种方法的明确定义。不过，我只是不明白为什么有媒体功能没有变化，以反映目前 – 以及可能的未来 – 现实。

有什么问题有一个像设备类媒体功能phone或tablet ？他们就像明显的选择，并且，根据调查前面提到，网页设计师想要的功能集。有人会说，这些可能不会在未来的“东西”，但几乎没有可信的，因为汽车，电视，电脑，冰箱，手表和眼镜仍然是“事”，人们发现有用的今天。而当我们真正看到了一项决议，问题件查询？

在我看来，媒体查询（如网页设计在多设备世界的一种工具），根本无法保持任何形式与当代网页设计师的创作轨迹平衡，他们是网页设计未来一个道义上是站不住脚的标准。也许我们应该看看的各种途径; 我想提出几个。他们没有那么复杂，而我们就需要有一个帽子，外套和领带。

帽子戏法

我们大概都熟悉CSS类选择器在这一点上。他们是最之一，在网页设计中常用的选择器。

 .muttley .do_something {…}

我不明白的是，为什么我们不使用这些类以上媒体查询来构建移动友好的网站？

这在我看来，设计网站为许多不同的情况会这么容易和更快，如果浏览器使用的HTML属性标记（HAT）。基本上，这将涉及到浏览器将特定参数的class的属性<html>标签（在加载页面的过程），这将使网页设计师可以利用这些类在他们的CSS标记。

其中一些参数可以包括以下内容：

设备组
固定，移动，家庭，穿，汽车等。
设备类
PC，手机，平板电脑，电视，冰箱，汽车，手表等。
输入设备
粗，细
带宽
高，中，低
方向
肖像，风景
视口的宽度和高度
在设备无关的像素，以40的最接近倍数，用一个字母前缀符合
本地日期和时间
在ddmmyyyy的日期，并提供24小时的表示时间格式
时区
UTC偏移量
一般地理位置
大陆和国家代码

根据预期的需要可以添加更多的参数。此外，所有参数将被抽象了DOM window对象，使他们很容易通过JavaScript访问。

因此，假设有人在使用的Nexus 5手机在一个4G LTE移动网络。该浏览器将添加相关的标签页，留给我们这样的：

 <html class="mobile phone coarse high portrait v360w v640h d07052014 t0900 utc_a af_ng">

如果他们改变了手机的方向为横向，浏览器将有状态更新标签，给我们这样的：

 <html class="mobile phone coarse high landscape v640w v360h d07052014 t0900 utc_a af_ng">

如果发生这种情况，网页设计师会有很多的选择，以快速适应跨多个逻辑断点他们的网页在思想字面上的速度。让我们考虑一个工作的例子。

我最近测试的定价表是不是不像看到了很多的SaaS网站的这些天表。该表是三列，并使用内置ul标签与浮动li标签。

定价表下面是一些常见问题的内容，也有一个多列布局。

很显然，这些多列元素就不会显得那么好上的所有的移动设备，因为他们会在桌面上。所以，在响应网页设计的精神，我们就必须使其适应更小的屏幕尺寸。我们会做到这一点的方法是通过展示这两种可视化组件在其完整的多列荣耀只有当网页正在查看的横向片剂。

这背后的逻辑是，我们希望在这方位的平板电脑有足够的屏幕空间为整个表显示为目的。如果这些条件不具备，那么我们将崩溃的列是线性的和垂直的。

基本的CSS我们的价格表是这样的：

 ul { margin: 0; padding: 0; list-style: none; } ul li { float: left; width: 33%; }

因此，利用帽子，我们将使用下面的标记实现这些功能：

 .mobile ul li { float: none; width: 100%; } .mobile.tablet.landscape ul li { float: left; width: 33%;}

就是这样！只是禁用所有移动设备的浮动布局元素，然后重新启用它们在横向片。简单的愿望，简单的解决方案。你想尝试做同样的事情与媒体查询？打招呼的StackOverflow博士为我！

显然，采用这种方法的好处有效率是一大好处 。你会花更少的时间建立网站，因为你不会浪费时间可笑的金额各具特色媒体查询，更何况所有的移动设备随之而来的测试。其次，保持你的标记会更容易些，因为一切都将是inline和就不会有不必要的重复。第三，你将有机会去探索更多的用例，因为将是作为阈值更合乎逻辑断点多个参数。

许多颜色的外套

每个人似乎都被分析被迷住了。网站分析程序，如谷歌Analytics和MixPanel，都试图给出一个很好的图片谁访问了你的网站，他们停留了多久，他们来自什么网站，他们使用什么设备，等这个数据不会告诉什么你的是什么内容的访问者有亲和力。

你可以，当然，使用cookie来跟踪访问者到你的网站，但随后你只能够确定自己喜欢上你的网站，每天或每周或每月。你将无法准确地确定他们所关心的具体内容，也可能你能够做任何事情，他们离开之前。

跟踪内容的亲和力和适应的内容说的亲和力可以真正帮助我们构建真正适应人类欲望的网站。要真正获得这些数据，虽然数据收集机制需要超越任何一个网站。也就是说，所有的网站都需要以合作和透明的方式来建立这种亲和形象。

COAT代表“ 累积性的，开放的亲和标记 ，”这只是一个认识事物的共享方法的访客有亲和力，然后构建亲和的形象。下面是它如何工作的：

经常有人访问了一堆网站。有些是新闻网站，有些是体育网站和一些博客。每个网页将有一个COAT meta标签。
浏览器（通过COAT子引擎）会读这个元标记，并在保留，保护和只读localStorage的变量（可以随意命名）增量存储在一个以逗号分隔的格式它的价值。所以，对于网站，我们的用户访问量，该值可能是news:info:1,sports:soccer:2,blog:tech:3 。
如果人访问另一个体育相关的网站，该网站会从localStorage中读取（和更新）的亲和标签。它看到的人是服从足球，所以提供了更多的重视在主页上的足球内容。

有了这种认识，我们可以调整一个网站的主页，以更好地满足用户在一个高度专业化的方式不同需求。

COAT数据将包括在以下格式的逗号分隔的字符串：

 {category_1}:{sub_category_1}:{popularity_1},…,{category_n}:{sub_category_n}:{popularity_n}

这里， category是一种类型的内容的宽泛分类; sub_category能够进一步分类; 和popularity是访问频率的度量。所以，如果我们的用户访问了科技博客30次一个月，参观了体育网站的足球节，每天5次，那么我们最终会和这个标签：

 blog:tech:30,sports:soccer:150

这仅仅是一个例子; 该分类系统将通过更大的网络社区定义和维护。一些保障措施是到位了。例如，如果一个网站没有定义一个COAT meta标签的话，那就不能够读取一个无论是。此外，如果用户在浏览的私模，然后COAT将被禁用。

COAT不会跟踪任何个人信息。这样做的目的不是要找出谁一个人是和他们可能会，但要获得他们喜欢什么样的内容（以及他们喜欢它）的广阔画面，让网站能够个性化他们的浏览体验。

配合

让我们面对这个事实：JavaScript是真棒。这不是很平易近人的大多数网页设计师，但它的功能仅仅是巨大的，而且它主宰网站做伟大的事情，将来，即使它在今天的网站功能的贡献是完全没问题的。

HTML和CSS是网站建设的一个伟大的二人，并曾因此相当长一段时间了。然而，仅HTML似乎已经允许保持与JavaScript的关系。当然，CSS是“用于描述文档的外观和格式样式表语言。”但就目前情况来看通过网络功能的设备主宰的世界，很多决定一个网站的外观和感觉的因素已经超越CSS的境界 。

其结果是，CSS需要被允许的“朋友”的JavaScript，并要求其在执行特定任务的帮助。真的应该有一种方法可以直接用内联CSS规则链接的Javascript功能。一个办法是通过超然内联表达式（TIE）。 TIE将提供链接的CSS规则与JavaScript表达式，开辟更令人惊讶的机会，对网站功能的机制。

让我们来看一个简单的例子。假设我们已经在我们的主页的侧边栏褒奖组件：

我们想把这个相同的组件到另一个页面的主要内容区域，某个地方，我们有更多的宽度与合作：

这就是所谓的模块化设计，并在概念上这是一个非常简单的想法。然而，我们就会有一个相当困难的时间在CSS中实施这一（伊恩风暴泰勒发现），因为没有一个简单的方法来CSS样式应用到基于其容器的大小的见证组件。

这个场景是什么引发了人们的叫嚣元素的查询，压倒一切的是需要一种方式来定义适应其包装容器的大小可重用的模块。如果本地的CSS实现某种功能的TIE，那么我们也许能够写在CSS中一个简单的表达式来实现这一目标：

 .testimonial { … } .testimonial[expr="if @parent:width less than 200px"] { … } .testimonial[expr="if @parent:width between 200px and 500px"] { … }

对于第一个规则集，我们会风格.testimonial像往常一样。对于第二个规则集，该表达式可能意味着，当父元素的宽度.testimonial是小于或等于200个像素，则应用相应的声明，以该DOM元素（即父元素）。这同样适用于第三个规则集，从而宣告时应用的父元素具有201像素到500像素的宽度。

基本上，CSS只会做什么提供指导，而JavaScript的会做繁重的CSS是不太适合。不是写的CSS规则集样式，然后跳转到JavaScript来激活它们，我们将简单地通过在CSS中的表达两者都做。因为我们正在同一个DOM元素上，它是有道理的，要有一些简单而直观的方式到时尚风格，并直接从CSS中激活它（即DOM元素）。

任何这样的TIE实现应该足够强大，让网页设计师在他们的创造力几乎速度来实现功能。换句话说，如果他们能够想象的那样，设计师应该能实现它 – 或接近它的东西 – 几乎瞬间。

全部放在一起

让我们来考虑一个场景，展示了如何建立一个网站，当所有三个能够融合在一起。

当你读到这封信的时候，世界杯将是，与来自世界各地的球迷将聚集在巴西体验杯Mundial酒店的惊险刺激。让我们假设你是那些球迷之一，是在圣保罗，还出现了智能手机和谷歌的玻璃与您联系。

一个流行的在线体育的目的地，恰好被覆盖的情况下，通常会毯其网站与世界杯的功能在其他体育赛事在世界其他地区正在进行的费用。该网站将采用三种方法前面，以提供一个非常特殊的用户体验解释。

建立各种内容组件后，该网站的开发人员应该能够做几件事情没有太多的压力：

优化网站专为谷歌玻璃，提供了更简单，界面更轻薄更容易导航。此外，调整色彩对比，一天的时间（即切换到文本的光在深色背景在夜间），用HAT的设备类的参数。
提供在不同的城市在巴西当地的景点更多的内容（例如运动吧，其它观赏中心等）只有在接入设备是一个智能手机或平板电脑，并恰好是在巴西（使用HAT的位置参数）。
领导与赛前分析，球队和球员配置文件，和商品如果用户访问六小时即将到来的比赛中的网站（使用与领带的组合帽子的时间参数）。
领导与比赛的亮点和赛后的分析，如果用户访问12小时内网站比赛结束后。对于比赛的亮点上使用相同的代码库（使用HAT设备级参数）智能手机和平板电脑提供不同的布局设计。
铅在更加突出的位置，比足球高尔夫功能，如果我们确定（通过COAT）用户喜欢比后者前者更多。但仍然显示比赛的亮点在侧边栏较窄像素宽度（使用CSS中的TIE风格特点以模块化的方式）。
默认为内容的常规格式，如果我们不能确定用户是否喜欢足球或其他运动。

正如你所看到的，高度个性化和精心加权用户体验的排列和机会是丰富的，容易实现的，如果所有三种方法进行审议。我们不一定要全部使用它们，但它很高兴知道他们在那里，如果我们想。

该Polyfill路

“你不能总是得到你想要的。但是如果你尝试有时候，你也许会发现，你得到你所需要的。“

– 滚石乐队

哪来的网页设计界是没有polyfills？如预期即使是最好的善意技术并不总是有效的，有时它有差距的功能。 “只要肃杀，polyfill”将是手术的口头禅在这些情况下，与过去几年确实是一个名副其实的polyfill-palooza 。

所有本文中到目前为止概述的功能仅仅是思想和在CSS或媒体查询任何即将到来的规范草案未指定用途的，所以你不能使用它们，现在，即使你想。然而，这并不意味着我们不能做一些事情在其间。

Restive.JS

我说过，我是用一个插件来建立一个网站。那么，这将是Restive.JS ，一个jQuery插件，我开发了大约一年前，拥抱并实现HAT原则。使用的内置选项breakpoints ， classes和命名一个特殊的功能turbo_classes ，Restive.JS填入您<html>或<body>与价值观，使您可以轻松通过内联CSS更适应网页的布局标记类属性自然的设计灵感。

一旦你的基本思想，用它来建立新的响应和自适应网站是很容易的，因为是将所述的功能，现有的网站。我最近写的教程“ 如何使任何网站响应，“你可以仔细阅读在您的休闲。

你还可以了解更多通过Restive.JS’文件，并从GitHub的自述。

宽容的一个注记

由于创意和专业技术人员，我们需要开放给其他人的意见。常人群迈向仅仅是因为punditocratic共识的位置，没有停下来质疑其背后的根本理由。

拿设备检测。有人说这是一种不好的做法。我的问题是为什么呢？是不是因为它被认为是不可靠的？我们可以把它可靠。有没有担心它是不是高性能？然后，我们可以缓存数据。解决大问题应该是一个包容性的努力，并采用排除法排除方法可能会反噬我们，如果有人能够改善该方法。

创造力是一个贪得无厌的黑客，只要想象力不断鞭策勤劳，那么最好的工具和方法，最终将让位于更好的。保持清晰，并紧紧地抓住手头的任务 – 和它的成功完成 – 不应该妨碍我们成为强大与我们的工具集。正如伟大的亚伯拉罕马斯洛说：“如果你只有一把锤子，一切看起来都像钉子。”

在关闭（但向前进）

更多的东西并不一定是好事。但是，当涉及到断点，“越多越好”确实不顺。作为人类，我们需要根据特定的阈值之间的特定触发器动作。更多定义这些阈值可以开辟机会，创造了适应超出屏幕大小等等很多方面的网站，并探索将变成是有益的。

然而，正如我们开辟新领域与新的断点，我们应该以一种方式，既方便快捷的为网页设计师这样做; 我们的方法的鲁棒性不应该使我们变得灵活。同程网标准工作，我们很可能将不得不polyfill我们到应许之地。但是这不应该从构建每一个设备上，并在众多的用户场景，工作真棒网站阻止我们。