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。

posted @ 2014-08-18 22:08  快乐八哥  阅读(179)  评论(0编辑  收藏  举报