Web Fundamentsals学习1-Multiple-Screen-Site

时间:2022-04-22
本文章向大家介绍Web Fundamentsals学习1-Multiple-Screen-Site,主要内容包括你的一个运行于多设备网站(Your First Multi-device Site)、02-Make it Responsive、总结:、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

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

遵循的步骤:

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。