文档章节

响应用户界面

蓝色犀牛
 蓝色犀牛
发布于 2017/04/23 17:10
字数 3350
阅读 2
收藏 0
点赞 0
评论 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
博文 19
码字总数 5800
作品 0
沙坪坝
其他
品向科技简述:APP开发流程

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

品向科技 ⋅ 2016/04/01 ⋅ 0

最新MeeGo 1.1.90 for 诺基亚N900测试报告(20110126)

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

米狗族 ⋅ 2011/01/27 ⋅ 2

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

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

shawlQ ⋅ 2014/05/10 ⋅ 5

GUI设计禁忌2.0

第1章 基本原则 1 1.1 基本原则1:关注用户及其任务,而不是技术 2 1.1.1 理解用户 3 1.1.2 理解任务 5 1.1.3 考虑软件工作的环境 9 1.2 基本原则2:首先考虑功能,然后才是表示 10 1.3 基本...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

甲骨文发布低代码平台,轻松扩展SaaS应用程序

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

玄学酱 ⋅ 05/15 ⋅ 0

javascript 观察者模式实现

观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式)是软件设计模式的一种。在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知...

musishui ⋅ 2016/11/05 ⋅ 0

Boostrap 基础、用户界面架构、响应式网页设计等课程分享

Boostrap 基础、用户界面架构、响应式网页设计等课程分享给大家,需要的可以回复留一下邮箱。

一课上手 ⋅ 2017/03/24 ⋅ 66

C#中WinForm控件的跨线程更新,如何使用Invoke

目的: 用WinForm(C#)搭建一个用户界面,一个进度条和一个按钮,按钮启动进度条,进度完成时停止更新 示例: 实现: 在按钮事件中设置循环,更新进度条 private void btnProgress_Click(obj...

btvnlue ⋅ 2015/11/17 ⋅ 0

JSP总结八:JSP与设计模式

MVC架构与设计模式 MVC模式最早来自Smalltalk-80。Model是应用对象,View负责在屏幕上显示用户界面,Controller定义了用户界面对用户输入的响应方式。使用这三个对象,可以将用户交互的程序内...

长平狐 ⋅ 2012/08/28 ⋅ 0

IOS 键盘的显示与关闭

在每一个IOS应用中,几乎不可避免的要进行文本输入操作,例如要求用户填写登陆注册信息,进行话题的评论回复,等等。用到的文本输入组件有UITextField,UITextView,对于这两个组件的相关属性和...

big军 ⋅ 2013/01/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windows profesional 2017 build problem

.net framework .... https://stackoverflow.com/questions/43330915/could-not-load-file-or-assembly-microsoft-build-frameworkvs-2017...

机油战士 ⋅ 30分钟前 ⋅ 0

python3中报错的解决方法(长期更新)

1、ImportError: No module named ‘DjangoUeditor’ 出错原因:安装DjangoUeditor库适用于python2,需要下载适用python3的 下载地址:https://github.com/twz915/DjangoUeditor3 2、python3......

xiaoge2016 ⋅ 35分钟前 ⋅ 0

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 54分钟前 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 56分钟前 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 56分钟前 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html...

whoisliang ⋅ 今天 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 今天 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 今天 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 今天 ⋅ 0

web添加log4j

添加xml配置log4j.properties # Global logging configuration---root日志设置#log4j.rootLogger=info,dailyRollingFile,stdoutlog4j.rootLogger=debug,stdout,dailyRollingFile---......

黄柳淞 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部