# Building sites for the multi-device web - 1505070820

![video\_screenshot](https://2300623831-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M42R_LUyJKgBHlKjSRa%2F-M42Rc6P9yocNdfaP271%2F-M42Rrgjhy9V6Dz3cDo0%2FoK09n_PGhTo.jpg?generation=1585974611328452\&alt=media)

&#x20;**视频发布时间**

> 2014年6月25日

&#x20;**视频介绍**

> How to build responsive sites for the multi-device web. Topics include responsive, viewport, media queries, and some layout patterns. This content rolls up to the webshine project

&#x20;**视频推介语**&#x20;

> 暂无，待补充。

## 译者信息

| 翻译 | 润稿  | 终审 | 原始链接                                                     | 中文字幕                                                     | 翻译流水号      | 加入字幕组                                                                                                                                                                                    |
| -- | --- | -- | -------------------------------------------------------- | -------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 韩淼 | 韩晓健 | -- | [ Youtube ](https://www.youtube.com/watch?v=oK09n_PGhTo) | [ Youtube ](https://www.youtube.com/watch?v=roo3WGEyHWk) | 1505070820 | [ 加入 GDG 字幕组 ](https://github.com/gdsub/pub/tree/420613f9ff598576d7b4321d0b83923050d0d03d/Chrome/067-IO-Bytes-2014-Chrome_and_Web/%7B%7B%20book.host%20%7D%7D/join_translator/README.md) |

## 解说词中文版：

Hi 我是Pete Google的一名开发技术推广工程师

我使用很多不同的设备浏览网页 我的电脑

平板 手机

现在一些网页在这些不同的设备上看起来都很好

但是其它网站呢

就不尽人意了

如果一个网站没有

针对多平台进行设计优化

那就需要平移 缩放 试着点击那些小按钮

这就不好玩了

而且相同的网站在TV上看会显得笨拙

这些按键可能会很大 而且触摸TV

会留下指纹

并不是没有办法解决

创建一个适应多平台的网站

不是很难 但需要我们

转换思考方式

小屏幕转换到大屏幕不仅仅是放大的问题

而是要调整内容与模式

以适应多设备网站

最简单的开始方式是

依据小屏幕设计 然后再生成大屏幕的

让我们试一下

我已经创建了一个适应于小屏幕的页面

这是所有的内容 适应于小屏幕的模式

它包含了viewport元标签

viewport元标签很重要

因为它告诉浏览器

适应设备的内容大小

设置width=device-width

和initial-scale=1很重要 这在CSS像素和设备独立像素(dips)之间

建立了一对一的关系

没有viewport元标签 手机浏览器

就会假设有980像素那么宽 跟电脑的一样

内容看起来就会很奇怪

因为它的缩放到适应980像素宽度来显示

造成页面看起来很小

根据viewport设置

现在我们已经为手机优化了网站

为了让它在大屏幕上看着更好

我们要加入断点

断点可以根据不同设备的特征

展现不同的风格 比如设备宽度

或者显示器像素密度

我们可以使用媒体查询(media queries)来显示不同的模式

给我们一个完全响应的体验

如果设备匹配到查询结果 媒体查询仅仅显示他们的模式

你要么通过加入手机参数去链接CSS文件

或者直接进入CSS去指定查询

对于大多数的设计 你会发现最小宽度的查询

是最有帮助的

最小宽度规则适用于浏览器的宽度不在

查询里已定义的值中

断点的定义要是根据具体设备

产品 品牌名称 操作系统 与之相似的任何东西

就是一个可怕的维护噩梦

相反 要使用内容去寻找正确的断点

让我们扩展页面观察

哪些断点是必须的

对于断点500像素看起来很好

之后向前在这里加入

我已经加入了一个新的带有媒体查询的样式表

来测试浏览器宽度

如果浏览器至少500像素宽度

之后这种样式在weather-large.CSS中被应用

好的

现在我们的基本模式是在小屏幕上展示

但在超过500像素宽的屏幕上

媒体查询开始起作用 宽的屏幕也有很好的体验

现在除了选择主要的断点

加入副级断点也很有帮助

让我们调整一些小东西

例如 我已经在400像素加入了一个副级断点

来调整外边距和内边距

提高一些字体大小 改变几个项目布局

让表现更加自然

如果你想更多地了解副级断点

看一下网站的基本网页

显而易见 对于建设很棒的

多设备网站还有很多可以说的

但是如果你从小屏幕做起 加入viewport元标签

之后调整浏览器直到你通过内容找到

这个断点很有用 这样你就步入正轨

感谢观看

去创建一些奇妙的吧
