Web Fundamentsals学习1-Multiple-Screen-Site

你的一个运行于多设备网站(Your First Multi-device Site)

clip_image001

遵循的步骤：

1.定义信息架构(information architecture)和页面结构(structure of the pages)。

2.添加设计元素，并且使它是响应式的，而且在各个设备看起来都不错

指南：

01 创建你的页面内容和结构 https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/content

02: 使它变成自适应 https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

01-Create Your Content and Structure

• 创建页面结构
• 添加内容到页面上

用户在form表单输入手机号码，应该调用出数字键，方便用户输入。

网站使用的图片分为2种类型：

1.内容图片

2.样式图片

img标签必须保证有alt属性，这样屏幕阅读器才能更好识别这是一张图片，而且读出来。

02-Make it Responsive

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

开发理念：Mobile First.首先开发基于手机屏幕的页面，然后我们扩展到大屏幕尺寸。

总结:

在新项目开发中,移动优先考虑,在涉及到使用百分比布局时,特别是在处理表单的情况下,可以考虑使用box-sizing:border-box，这个属性非常好用，很容易处理input等相关元素的宽度一致问题。下一篇分析使用box-sizing。