8分钟阅读

响应网页设计简介:伪元素,媒体查询等

Tomislav是一家自由职业者的网络开发商和设计师,拥有超过10年的经验,独立工作,作为项目领导者。

如今,您的网站将由各种设备访问:具有大型监视器,中型笔记本电脑,平板电脑,智能手机等台式机器人。

实现最佳用户体验 前端工程师,您的网站应响应于这些各种设备(即,改变屏幕分辨率和尺寸)调整其布局。这个过程 回应 对于用户设备的形式被称为(您猜到了) 响应式网页设计 (RWD).

为什么值得你学习的时间 响应式网页设计 例子并将焦点转移到rwd?例如,某些网页设计师,反而使其成为他们的生活的工作,以确保在所有浏览器中稳定的用户体验,通常花费在结束时使用Internet Explorer的小问题。

这是一种愚蠢的方法。

某些网络设计师在结束时段地解决了与Internet Explorer的小问题,并将其移动用户作为二手访客留下。这是一种愚蠢的方法。

柔和的网页设计叫做2013年。为什么?超过30%的流量来自移动设备。他们项目将在今年年底之前达到50%。一般来说, 17.4%的网络流量来自2013年智能手机。同时,Internet Explorer使用,例如,占所有人的12% 浏览器 交通,从去年这个时间下降约4%(根据 W3Schools.)。如果您是针对特定浏览器优化,而不是全球智能手机种群,您将缺少树木的森林。在某些情况下,这可能意味着成功和失败响应性的差异有影响 转换率, SEO, 反弹率, 和更多。

响应式网页设计方法

关于RWD通常融合的是,它不仅仅是调整网页的外观;相反,重点应该是在逻辑上适应您的网站以跨不同设备使用。例如:使用鼠标不提供与触摸屏一样相同的用户体验。你不同意吗?您的响应式移动与桌面布局应反映这些差异。

与此同时,您不想完全重写您的站点,了解可能会看到它的几十个不同的屏幕大小 - 这种方法是即时不可行的。相反,解决方案是实现使用相同的HTML代码来调整用户屏幕尺寸的灵活响应设计元素。

从技术角度来看,解决方案在于这个响应设计教程:使用 CSS媒体查询, 伪元素,灵活的设置网格布局,以及其他工具,可动态调整到给定的分辨率。

敏感设计中的媒体查询

媒体类型首次出现在 HTML4CSS2.1,它使放置单独的CSS进行屏幕和打印。通过这种方式,可以为其打印输出设置页面的计算机显示Vis-à-is-in-is-iclout的单独样式。

<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css"  media="print">

或者

@media screen {
    * {
        background: silver
    }
}

CSS3,您可以根据页面宽度定义样式。随着页面宽度与用户设备的大小相关联,因此这种功能允许您为不同设备定义不同的布局。 注意:支持媒体查询 所有主要浏览器.

This definition is possible through the setting of basic properties: 最大宽度, device-width, 或者 ientation, 和 color. Other definitions are possible as well; but in this, case the most important things to note are minimum resolution (width) and orientation settings (landscape vs. portrait).

下面的响应性CSS示例显示了在页面宽度上启动某个CSS文件的过程。例如,如果480px是当前设备屏幕的最大分辨率,则将应用Main_1.css中定义的样式。

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

我们还可以在相同的CSS样式表中定义不同的样式,使得仅在满足某些约束时才使用它们。例如,我们的响应性CSS的这部分只会使用,如果当前设备的宽度高于480px:

@media screen and (min-width: 480px) {
    div {
        float: left;
        background: red;
    }
    .......
}

“智能缩放”

移动浏览器使用所谓的“智能缩放”,为用户提供“优越”的阅读体验。基本上,智能缩放用于按比例减少页面尺寸。这可以以两种方式表现出来:(1)用户启动的缩放(例如,在iPhone屏幕上点击两次,以放大当前网站),并且(2)最初显示在网页的zoomed-in版本上加载。

鉴于我们只需使用响应的媒体查询来解决智能缩放可能被定位的任何问题,通常需要(甚至是必要的)来禁用缩放并确保页面内容始终填充浏览器:

<meta name="viewport" content="width=device-width, initial-scale=1" />

By setting initial-scale to 1, we control the initial page zoom level (that is, the amount of zoom upon page load). If you’ve designed your web page to be responsive, then your fluid, dynamic layout should fill the smartphone screen in an intelligent way without requiring any initial zoom.

在 addition, we can disable zoom completely with user-scalable=false.

页面宽度

假设您希望提供三个不同的敏感页面布局:一个用于台式机,一个用于平板电脑(或笔记本电脑),一个用于智能手机。您的截止值是否应将哪个页面尺寸(例如,480px)目标?

不幸的是,没有针对目标宽度的已定义标准,但通常使用以下示例响应值:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1024px
  • 1200px

但是,存在许多不同的宽度定义。例如, 320和UP. 有五个默认CSS3媒体查询增量:480,600,768,992和1382px。除了在这个响应的Web开发教程中,我可以枚举至少十种其他方法。

与任何这些合理的增量集,您可以针对大多数设备。在实践中,通常不需要单独处理页面宽度 - 七个不同分辨率的所有上述示例可能是矫枉过正。在我的经验中,320px,768px和1200px是最常用的;这三个值应足以分别用于定位智能手机,平板电脑/笔记本电脑和桌面。

psuedo-compents.

从上一个示例的响应媒体查询之上构建,您也可能需要根据用户设备的大小以编程方式显示或隐藏某些信息。幸运的是,这也可以用下面的教程中概述的纯CSS来完成。

For starters, hiding some elements (display: none;) can be a great solution when it comes to reducing the number of on-screen elements for a smartphone layout, where there’s almost always insufficient space.

但除此之外,您还可以使用CSS创造性 伪元素 (selectors), e.g., :before:after. 注意:再次,伪元素得到支持 所有主要浏览器.

Pseudo-elements are used to apply specific styles to specific portions of an HTML element, or to select a certain subset of elements. For example, the :first-line pseudo-element lets you define styles solely on the first line a certain selector (e.g., p:first-line will apply to the first line of all ps). Similarly, the a:visited pseudo-element will let you define styles on all as with links previously visited by the user. Clearly, these can come in handy.

这是一个简单的响应设计示例,其中我们为登录按钮创建了三种不同的布局,桌面,平板电脑和智能手机的一部。在智能手机上,我们将有一个孤片图标,而平板电脑将具有相同的图标,伴随着“用户名”。最后,对于桌面,我们还将添加短的教学消息(“插入您的用户名”)。

.username:after {
    content:"在sert your user name";
}
@media screen and (max-width: 1024px) {
    .username:before {
        content:"User name";
    }
}
@media screen and (max-width: 480px) {
    .username:before {
        content:"";
    }
}

Using just the :before:after pseudo-elements, we achieve the following:

该响应性CSS示例描绘了三个版本的伪元素。

有关Psuedo-Elements的魔力,Chris Coyier有一个好的 写上去 on CSS-Tricks.

那么,我应该在哪里开始?

在本教程中,我们已经建立了一些用于响应Web设计的构建块(即媒体查询和伪元素),并奠定了每个示例。我们从哪里开始?

您应该采取的第一步是将所有网页的元素组织成各种屏幕大小。

这些响应网设计示例显示了不同设备上的布局。

看看上面呈现的布局的桌面版本。在这种情况下,左侧的内容(绿色矩形)可以用作某种主菜单。但是,当具有较低分辨率的设备是使用的(例如,平板电脑或智能手机)时,此主菜单可以在全宽中显示出来。使用媒体查询,您可以实现此行为如下:

@media screen and (max-width: 1200px) {
    .menu { 
        width: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .menu {
        width: 30%;
    }
}

不幸的是,由于您的前端在并发症的前端增长,这种基本方法通常不足。由于站点的内容组织通常在移动和桌面版本之间显着不同,因此用户体验最终取决于不仅使用响应性CSS,还可以使用HTML和JavaScript。

在确定不同设备的响应布局时,几个关键元素很重要。与我们有足够空间的桌面版本不同,智能手机开发更苛刻。超过以往,必须对特定内容进行分组,分层定义各个部分的重要性。

对于智能手机来说,它比以往任何时候都更重要,并对特定的内容进行分组,定义各个部件的重要性。

您内容的各种用途也很重要。例如,当您的用户有鼠标时,它们可以将光标设置在某些元素上方以获取更多信息,因此您(随着Web开发人员)可以以这种方式收集一些信息 - 但这不会是当您的用户在智能手机上时的情况。

此外,如果您在网站上留下按钮,那么在智能手机上呈现小于典型手指,您将在您的网站的使用和感受中创造不确定性。请注意,在上面的图像中,标准Web视图(左侧)会在较小设备上查看时,呈现一些完全无法使用的元素。

敏感设计元素必须与小鼠和触摸屏一起使用。

此类行为还将增加您的用户发出错误的机会,减慢了他们的体验。在实践中,这可以表现为页面视图的减少,销售额减少,更少的整体参与度。

其他敏感设计元素

使用媒体查询时,应记住所有页面元素的行为,而不仅仅是那些正在针对的行为,特别是在使用流体网格时,在这种情况下(与固定尺寸相反),页面将完全填充任何给定的页面矩,增加和比例地减少内容尺寸。由于宽度以百分比设置,因此图形元素(即,图像)可以在这种流体布局下变形和变形。对于图像,一个解决方案如下:

img {
    max-width: 100%
}

其他元素应以类似的方式处理。例如,RWD中的图标的一个很好的解决方案是使用 iconfonts..

流体电网系统上几句话

当我们讨论完整设计适应过程时,我们经常看出最佳观看体验(来自用户的角度来看)。这种讨论应包括最大促进的使用,元素重要性(基于可见页面),促进阅读和直观导航。在这些类别中,最重要的组件之一是 内容宽度调整。例如,所谓的流体电网系统具有基于相对宽度的元素,即元素作为整体页面的百分比。通过这种方式,所有元素都在 响应式网页设计 系统自动使用页面的大小调整。

虽然这些流体电网系统与我们在这里一直在讨论的内容密切相关,但它们真的是一个整个单独的实体,这些实体需要额外的教程详细讨论。因此,我只会提到一些支持这种行为的主要框架: 引导, 肆无忌惮, 和 括号.

结论

直到最近,网站优化是一个完全保留用于根据不同的Web浏览器定制功能的术语。除了我们今天面临的不同浏览器标准的不可避免的斗争,该术语现在假设使用响应式网页设计适应设备和屏幕尺寸。要将其切割在现代网络上,您的网站必须不仅知道 谁是 观看它,但 如何.