文档章节

响应用户界面

蓝色犀牛
 蓝色犀牛
发布于 2017/04/23 17:10
字数 3350
阅读 4
收藏 0

响应用户界面

Pete LePage

By Pete LePage

Pete is a Developer Advocate

Translated By:

Henry Lim

By Henry Lim

Co-Organizer @ GDG Kuala Lumpur

创建灵活设计,而不是固定的设计,布局。并且能够在任何尺寸的屏幕正常运行。

Responsive Web Design

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

Take Course

设置视口

对于针对各种设备优化过的网页,其文档标头中必须包含元视口元素。元视口代码会指示浏览器如何对网页尺寸和缩放比例进行控制。

TL;DR

  • 使用元视口代码控制浏览器视口的宽度和缩放比例。
  • 添加 width=device-width 以便与屏幕宽度(以设备无关像素为单位)进行匹配。
  • 添加 initial-scale=1 以便将 CSS 像素与设备无关像素的比例设为 1:1。
  • 确保在不停用用户缩放功能的情况下,您的网页也可以访问。

为了提供最佳体验,移动浏览器会以桌面设备的屏幕宽度(通常大约为 980 像素,但不同设备可能会有所不同)来呈现网页,然后再增加字体大小并将内容调整为适合屏幕的大小,从而改善内容的呈现效果。对用户来说,这就意味着,字体大小可能会不一致,他们必须点按两次或张合手指进行缩放,才能查看内容并与之互动。

 

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

使用元视口值 width=device-width 指示网页与屏幕宽度(以设备无关像素为单位)进行匹配。这样一来,网页便可以重排内容,使之适合不同的屏幕大小(从较小的手机到较大的桌面设备显示器,不一而足)。

未设置视口的网页

查看示例

已设置视口的网页

查看示例

有些浏览器会在旋转到横向模式时保持固定的网页宽度,然后通过缩放(而不是重排)填满屏幕。添加属性 initial-scale=1 会指示浏览器在不考虑设备方向的情况下,指示浏览器将 CSS 像素与设备无关像素的比例设为 1:1,并允许网页完全占用横向宽度。

Note: 使用英文逗号分隔属性,确保旧版浏览器可以准确解析相关属性。

确保视口可以访问

除了设置 initial-scale 外,您还可以在视口上设置以下属性:

  • minimum-scale
  • maximum-scale
  • user-scalable

但是,设置后,这些属性可以停用用户缩放视口的功能,可能会造成网页访问方面的问题。

调整内容大小,使其适合视口

无论在桌面设备上还是在移动设备上,用户都习惯上下滚动网站,而不是横向滚动,因此,如果用户必须横向滚动或缩小页面才能查看整个网页,那么这将给用户带来糟糕的体验。

TL;DR

  • 请勿使用较大的固定宽度元素。
  • 在任何视口宽度下,内容均应正常显示。
  • 使用 CSS 媒体查询为不同尺寸的屏幕应用不同样式。

使用 meta viewport 代码开发移动版网站时,开发者很容易在无意间创建出不太适合指定视口的网页内容。例如,如果图片宽度大于视口宽度,那么就会导致视口横向滚动。您应该调整此内容,使其适合视口内的宽度,以便用户无需横向滚动。

由于不同设备(例如手机和平板电脑,甚至不同手机之间)的屏幕尺寸和宽度(以 CSS 像素为单位)差别很大,因此内容不应只在特定视口下正常显示。

为网页元素设置较大的 CSS 绝对宽度(如下例所示)会导致 div 因过宽而不适合窄视口设备(例如,iPhone 等宽度为 320 CSS 像素的设备)。因此,请改为使用相对宽度值,例如 width: 100%。同样请注意,使用较大的绝对定位值可能会使元素脱离小屏幕上的视口。

iPhone 上带有 344 像素的固定宽度元素的网页。

查看示例

Nexus 5 上带有 344 像素的固定宽度元素的网页。

查看示例

 

媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器,我们可以根据设备呈现内容的特点轻松更改样式,包括显示屏类型、宽度、高度、方向甚至是分辨率。

TL;DR

  • 媒体查询可用于根据设备特点应用样式。
  • 优先使用 min-width(而非 min-device-width),以确保实现最宽阔的视觉体验。
  • 为元素使用相对尺寸,以免破坏版式完整性。

例如,您可以将打印必需的所有样式放在打印媒体查询中:

 

<link rel="stylesheet" href="print.css" media="print">

除了在样式表链接中使用 media 属性之外,我们还可以通过另外两种方法应用可以嵌入 CSS 文件的媒体查询:@media 和 @import。出于性能方面的考虑,我们建议开发者优先考虑使用前两种方法,尽量避免使用 @import 语法(请参阅避免 CSS 导入)。

 

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

不同媒体查询适用的逻辑并不是互斥的,因此,开发者可以根据 CSS 中优先级的标准规则,应用满足生成的 CSS 区块标准的任何过滤器。

根据视口大小应用媒体查询

通过媒体查询,我们可以打造自适应体验,使特定样式可应用于小屏幕、大屏幕和介于两者之间的屏幕。通过媒体查询语法,我们可以创建可根据设备特点应用的规则。

 

@media (query) {
  /* CSS Rules used when query matches */
}

尽管我们可以查询多个不同的项目,但自适应网页设计最常使用的项目为:min-width、max-width、min-height 和 max-height。

属性 结果
min-width 当任意浏览器宽度大于查询中定义的值时适用的规则。
max-width 当任意浏览器宽度小于查询中定义的值时适用的规则。
min-height 当任意浏览器高度大于查询中定义的值时适用的规则。
max-height 当任意浏览器高度小于查询中定义的值时适用的规则。
orientation=portrait 高度大于或等于宽度的任意浏览器适用的规则。
orientation=landscape 宽度大于高度的任意浏览器适用的规则。

我们通过一个示例了解一下:

预览使用媒体查询的网页,以便在调整尺寸时更改属性。

 

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>

  • 当浏览器宽度介于 0 像素和 640 像素之间时,系统将会应用 max-640px.css。
  • 当浏览器宽度介于 500 像素和 600 像素之间时,系统将会应用 @media。
  • 当浏览器宽度为 640 像素或大于此值时,系统将会应用 min-640px.css。
  • 当浏览器宽度大于高度时,系统将会应用 landscape.css。
  • 当浏览器高度大于宽度时,系统将会应用 portrait.css。

min-device-width 注意事项

尽管开发者也可以根据 *-device-width 创建查询,但是我们强烈建议不要这么做

这两种代码的差别虽然不明显但却十分重要:min-width 以浏览器窗口尺寸为依据,而 min-device-width 却是以屏幕尺寸为依据。很遗憾,有些浏览器(包括旧版 Android 浏览器)可能无法正确报告设备宽度,反而会以预期的视口宽度报告屏幕尺寸(以设备像素为单位)。

此外,使用 *-device-width 会阻止内容适应允许窗口调整大小的桌面设备或其他设备,因为该查询基于设备的实际大小,而非浏览器窗口大小。

使用相对单位

与固定宽度的版式相比,自适应设计的主要概念基础是流畅性和比例可调节性。使用相对衡量单位有助于简化版式,并防止无意间创建对视口来说过大的组件。

例如,在顶级 div 上设置 width: 100% 可以确保其横跨视口的宽度,对视口来说既不会太大也不会太小。无论设备是宽度为 320 像素的 iPhone、宽度为 342 像素的 Blackberry Z10,还是宽度为 360 像素的 Nexus 5,div 均会适合这些屏幕。

此外,使用相对单位可让浏览器根据用户缩放程度呈现内容,而无需为网页添加横向滚动条。

Not recommended — fixed width

 

div.fullWidth {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

Recommended — responsive width

 

div.fullWidth {
  width: 100%;
}

如何选择断点

尽管根据设备类定义断点的方法可能很有用,但请慎用这种方法。如果根据具体设备、产品、品牌名称或现今正在使用的操作系统定义断点,后期维护起来可能会困难重重。相反,内容本身应该确定版式调整方式,使其适合自己的容器。

TL;DR

  • 根据内容创建断点,绝对不要根据具体设备、产品或品牌来创建。
  • 从针对最小的移动设备进行设计入手,然后随着屏幕类型不断增加而逐渐改善体验。
  • 使每行的文字最多为 70 或 80 个字符左右。

以从小屏幕开始、不断扩展的方式选择主要断点

先针对小屏幕尺寸进行内容设计,然后扩展至不同尺寸的屏幕,直到必须添加断点为止。如此一来,您便可以根据内容优化断点,并使断点数量降至最低。

我们来分析一下在开头部分看到的示例天气预报。 首先使天气预报在较小的屏幕上呈现效果良好。

在较小的屏幕上预览天气预报的显示效果。

接下来,调整浏览器大小,直到元素之间的空间过大,天气预报根本无法正常显示为止。具体应调整到多大是由自己主观决定的,但超过 600 像素肯定就过宽了。

在网页逐渐变宽时预览天气预报的显示效果。

要在 600 像素处插入断点,请新建两个样式表,一个在浏览器不超过 600 像素时使用,另一个在超过 600 像素时使用。

 

<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

最后,重新设计 CSS。在本例中,我们已将常用的样式(例如字体、图标、基本定位和颜色)放入 weather.css。然后,针对小屏幕的特定版式会放入 weather-small.css,而大屏幕样式则放入 weather-large.css。

Preview of the weather forecast designed for a wider screen.

必要时选择小断点

除了选择主要断点使版式发生重大变化外,做出适当调整产生微小变化的做法也很有用。例如,进行以下调整可能会很有用:在主要断点之间调整某个元素的边距或内边距,或增加字体大小使其在版式中看起来更自然。

首先优化小屏幕版式。在本例中,当视口宽度超过 360 像素时,我们来增加字体大小。接下来,当有足够的空间时,我们可以将高温和低温分隔开,使其在同一行中显示,而不是以上下排列的形式显示。然后,我们来调大天气图标。

 

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

Before adding minor breakpoints.

Before adding minor breakpoints.

After adding minor breakpoints.

After adding minor breakpoints.

同样,如果是大屏幕,我们最好限制天气预报面板的宽度,使其不会占用整个屏幕宽度。

 

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

优化文本,提高可读性

传统的可读性理论建议:理想栏目的每一行应该包含 70 到 80 个字符(大约 8 到 10 个英文单词),因此,每次文本块宽度超过 10 个单词时,就应考虑添加断点。

添加小断点之前。

Before adding minor breakpoints.

添加小断点之后。

After adding minor breakpoints.

我们来深入分析一下上述博文示例。在较小的屏幕上,大小为 1em 的 Roboto 字体可以使每行完美地呈现 10 个单词,而在较大的屏幕上就需要添加断点了。在本例中,如果浏览器宽度超过了 575 像素,那么内容的理想宽度是 550 像素。

 

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

绝不能完全隐藏内容

在根据屏幕大小选择要隐藏或显示的内容时请务必谨慎。 不要只是因为内容无法适合屏幕而将其隐藏。屏幕大小并非确定用户需求的决定性因素。例如,如果去除天气预报中的花粉统计数据,那么对春天容易过敏的用户来说就是非常严重的问题,因为这些用户要根据这类信息决定是否外出。

本文转载自:

共有 人打赏支持
下一篇: 图像优化
蓝色犀牛
粉丝 0
博文 21
码字总数 5800
作品 0
沙坪坝
其他
私信 提问
最新MeeGo 1.1.90 for 诺基亚N900测试报告(20110126)

MeeGO 1.1.90 for N900总体报告: 关键问题: 10147 - [N900] 启动后用户界面无响应。 运行率和通过率所受以下bug 的影响: 触摸屏不能正常工作10147 - [N900]启动后用户界面无响应。 性能数...

米狗族
2011/01/27
646
2
品向科技简述:APP开发流程

不论是ios还是android的应用开发,其实都遵循着一定的开发流程,只有如此才能使开发过程有章可循而不是一团乱。 app应用开发的流程是怎样的? 1.明确你的构想和理念。 你的app应用是开发给谁...

品向科技
2016/04/01
143
0
DevExtreme 18.2 发布,响应式 Web 开发 JS 组件

DevExtreme 宣布他们的新半年度发布。DevExtreme 是用于响应式 Web 开发的 HTML5 JavaScript 组件套件,跨平台组件套件包含为触摸设备和传统桌面创建响应式 Web 应用所需的全部内容:数据网格...

DevExtreme
11/09
275
0
python写个小工具,是不是至少要分2个线程?一个线程管理工具的用户界面,另一个线程做用户操作的运算?

python写了个小工具,是做计算用的,每次计算会耗时几分钟。 工具运行本身没有问题,但是运行时工具界面会显示无响应,直到计算运行完才恢复。 当前代码没有使用线程。就是想请教下高手们,带...

shawlQ
2014/05/10
480
5
甲骨文发布低代码平台,轻松扩展SaaS应用程序

甲骨文全球大会,美国旧金山,2016年9月21日 -甲骨文今天发布了云可视化开发平台(Project Visual Code),为低代码开发提供全面基于云的应用平台。通过这一创新化的平台,客户可根据业务需求...

玄学酱
05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Impala和Hive集成Sentry、Kerberos认证

关于 Kerberos 的安装和 HDFS 配置 kerberos 认证,请参考 HDFS配置kerberos认证。 关于 Kerberos 的安装和 YARN 配置 kerberos 认证,请参考 YARN配置kerberos认证。 关于 Kerberos 的安装和...

hblt-j
5分钟前
0
0
Ubuntu 18.04 PostgreSQL 11 apt 默认安装某些问题解析

首先默认安装软件(本文以PostgreSQL 11.1为例,其他版本类似)。 sudo apt install postgresql-11 等待软件自动安装并完成配置,启动服务。 服务状态如下: vmware@vmware-virtual-machine:...

白豆腐徐长卿
18分钟前
1
0
一步步动手实现高并发的Reactor模型 —— Kafka底层如何充分利用多线程优势去处理网络I/O与业务分发

一、从《Apeche Kafka源码剖析》上搬来的概念和图 Kafka网络采用的是Reactor模式,是一种基于事件驱动的模式。熟悉Java编程的读者应该了解Java NIO提供了Reactor模式的API。常见的单线程Jav...

Anur
21分钟前
1
0
数字信号处理各种处理及图象

https://wenku.baidu.com/view/b1bb67f1f90f76c661371a75.html?sxts=1544696459935

whoisliang
25分钟前
1
0
rabbitmq学习

使用docker安装rabbit docker run -d --hostname my-rabbit --name rabbit -p 8080:15672 rabbitmq:management--hostname:指定容器主机名称--name:指定容器名称-p:将mq端口号映射到本地...

元谷
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部