确定响应式设计的断点

这是来自第3章的编辑摘录 实施响应式设计由Peachpit Press出版,上周开始发售。

确定断点的传统方法是使用一些相当标准的宽度:320px(iPhone和其他几个移动设备落在频谱上),768px(iPad)和1024px。但是,依赖这些“默认”断点存在问题。

当您开始完全通过常见设备的分辨率定义断点时,您冒着专门针对这些宽度进行开发并忽略中间点的风险(例如,将iPhone旋转到横向并且您刚刚引入了480px宽度) 。它也不是一种特别适合未来的方法。今天流行的东西明天可能不会流行。当下一个热设备出现时,您将被迫添加另一个断点以便跟上。这是一场失败的战斗。

01.关注内容

更好的方法是让内容决定断点发生的位置,以及您需要的断点数。开始调整浏览器窗口的大小,看看哪里有改进的余地。

通过允许内容引导您,您将进一步将布局与特定分辨率分离。当布局需要调整时,你会让页面的流量决定 - 一个明智且对未来友好的举动。

要确定您的断点,您可以将浏览器的窗口缩小到大约300px(假设您的浏览器让您走得那么远),然后慢慢调出窗口大小,直到看起来需要修改它们。

大约600px,“足球中的更多”部分中的图像开始变得有点令人讨厌。在这里引入媒体查询以将这些故事浮动到一边,就像在第2章“流体布局”中那样,可能是有意义的:

The images start to dominate the screen around 600px (left), so it makes sense to add a breakpoint here and adjust the design (right)

图像开始占据屏幕大约600px(左),所以在这里添加断点并调整设计是有意义的(右)

@media all和(min-width:600px){
.slats Li {
向左飘浮;
保证金权利:2.5316456%; / * 24px / 948px * /
宽度:31.6455696%; / * 300/948 * /
}
.slats Li:last-child {
Margin-right:0;
}
}

大约860px,所有旁边的内容开始感觉分开。窗口仍然太窄而不能将其放在右边,所以相反,将它们放在一边,使它们排成两排:

@media all和(min-width:860px){
在旁边{
显示:块;
Margin-bottom:1em;
填充:0 1%;
宽度:自动;
}
除了{
向左飘浮;
保证金权利:2%;
宽度:48%;
}
.article标签{
明确:两者;
}
。广告{
Text-align:center;
Padding-top:2.5em;
}
}

Adding a breakpoint to let the sections in the aside float next to each other makes the layout look much tighter

添加断点以使旁边的部分彼此相邻,使布局看起来更紧凑

在这个断点处,看起来导航项可能会再次浮动,而不是堆叠在彼此之上(见下文)。这些样式在注释掉的CSS中,因此我们将抓取它们并将它们放在媒体查询中。我们还将删除导航项上的边框:

@media all和(min-width:860px){
...
nav [role =“navigation”] li {
向左飘浮;
Border-top:0;
}
nav [role =“navigation”] a {
向左飘浮;
}
页脚[role =“contentinfo”]。top {
漂浮:对;
}
}

There's enough room to float the navigation now, bring the content further up the page

现在有足够的空间来浮动导航,将内容带到页面的更上方

最后,它似乎可以在940px左右重新启动到右侧。旁边的部分也需要告知不浮动,并再次占据整个宽度:

@media all和(min-width:940px){
.main {
显示:table-cell;
Padding-right:2.5316456%; / * 24px / 948px * /
}
在旁边 {
显示:table-cell;
宽度:300px;
}
除了img {
最大宽度:100%;
}
除了{
Float:none;
宽度:100%;
}
}

此时,940px或更宽的布局看起来很像第2章“流体布局”的结尾。

With one more breakpoint, the layout on a screen at least 940px wide looks a lot like it did before we started

有了一个断点,屏幕上至少940px宽的布局看起来就像我们开始之前那样

02.增强大屏幕

使浏览器窗口更宽,这表明在文章的行长度开始难以阅读之前不久。许多站点在此处实现最大宽度以限制浏览器窗口可以调整大小的程度,或者缩小字体大小以改善行长度。

我们不再限制页面的宽度,而是使用CSS3多列布局。

For wider screens, splitting the article in two columns helps to maintain a reader friendly line length

对于更宽的屏幕,将文章分成两列有助于保持读者友好的线长

通过多列布局模块,您可以告诉浏览器根据需要在多个列中显示内容。支持也不错:Opera,Firefox,Internet Explorer 10和WebKit都支持它。请确保在Firefox和WebKit的情况下使用正确的前缀。 Opera或Internet Explorer不需要前缀。由于这是一个很好的功能,但不是网站必不可少的,我们可以逐步增强这些浏览器的体验:

@media all和(min-width:1300px){
.main Section {
-moz-column-count:2; / * Firefox * /
-webkit-column-count:2; / * Safari,Chrome * /
列数:2;
-moz-column-gap:1.5em; / * Firefox * /
-webkit-column-gap:1.5em; / * Safari,Chrome * /
柱间隙:1.5em;
-moz-column-rule:1px点缀#ccc; / * Firefox * /
-webkit-column-rule:1px dotted #ccc; / * Safari,Chrome * /
column-rule:1px dotted #ccc;
}
}

第3-5行告诉浏览器应该使用多少列来显示文章。第6-7行告诉浏览器在列之间插入1.5em间隙(24px)。最后,第9-11行告诉浏览器在该间隙中包含1px浅灰色虚线,以提供更多的视觉分离(见下图)。

行长现在好多了,但页面仍然可以从文章和作者信息之间的某些分离中受益。图片也可以使用距内容更远的距离:

@media all和(min-width:1300px){
.main Section Img {
Margin-bottom:1em;
border:3px solid #dbdbdb;
}
.main .articleInfo {
border-bottom:2px solid #dbdbdb;
}
...
}

由于边框位于图像周围和部分上方,并且增加了额外的填充,设计再次看起来非常清晰。

The addition of some spacing and a border help to separate the image from the text that follows

添加一些间距和边框有助于将图像与后面的文本分开

03.使用ems进行更灵活的媒体查询

人们浏览网页的浏览器设置为不同的缩放因子。遇到困难的人可能会发现大多数网站的字体大小难以阅读,因此他可能会将其偏好设置为默认放大。

当人们使用不同的缩放系数时,字体大小会增加(或减少)。在Firefox和Opera中,这不是问题;基于像素的媒体查询根据缩放因子重新计算并应用。然而,在其他浏览器上,我们完美放置的像素断点使我们失败。突然间事情开始以尴尬的方式浮动,我们理想的线条长度被无情地抛到了窗外。当我们在第2章“流体布局”中讨论时,设备使用不同的默认字体大小时会出现同样的问题。例如,Kindle的26px大小的字体将对基于像素的媒体查询造成严重破坏。我们可以通过将断点转换为ems来解决这些问题并使我们的网站更加灵活。

With pixel-based breakpoints if the visitor is browsing zoomed in, our carefully crafted layout goes to shambles

如果访问者正在浏览放大的基于像素的断点,我们精心设计的布局会变得混乱

正如我们在第2章中讨论的那样,将基于像素的测量转换为ems就像将目标(断点)除以上下文(在本例中为16px,正文字体大小)一样简单:

/ * 600px / 16px = 37.5em * /
@media all和(min-width:37.5em){
...
}
/ * 860px / 16px = 53.75em * /
@media all和(min-width:53.75em){
...
}
/ * 940px / 16px = 58.75em * /
@media all和(min-width:58.75em){
...
}
/ * 1300px / 16px = 81.25em * /
@media all和(min-width:81.25em){
...
}

现在使用ems设置媒体查询,即使网站放大了几个级别,媒体查询也会启动,确保布局保持优化。

By setting breakpoints in em units, you ensure that the visitor will get an appropriate layout no matter their zoom factor

通过以em为单位设置断点,可以确保访问者无论缩放因子如何都能获得适当的布局

使用基于em单元的媒体查询是另一种包含网络灵活性和不可预测性的方式。它使用户能够控制体验,并允许内容决定布局。

蒂姆卡德莱克是一位居住在威斯康星州北部的网络开发人员。他与小公司合作的大型出版商和工业公司的多元化背景使他能够看到网络技术的精心应用如何影响各种规模的企业。他是联合创始人打破发展会议,首批致力于使用网络技术设计和开发移动设备的会议之一。

喜欢这个?阅读这些!



翻译字数超限