Building sites for the multi-device web - 1505070820
视频发布时间
2014年6月25日
视频介绍
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
视频推介语
暂无，待补充。
译者信息
翻译
润稿
终审
原始链接
中文字幕
翻译流水号
加入字幕组
解说词中文版：
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元标签
之后调整浏览器直到你通过内容找到
这个断点很有用 这样你就步入正轨
感谢观看
去创建一些奇妙的吧
Last updated
Was this helpful?