你的一个运行于多设备网站(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
开发理念:Mobile First.首先开发基于手机屏幕的页面,然后我们扩展到大屏幕尺寸。
总结:
在新项目开发中,移动优先考虑,在涉及到使用百分比布局时,特别是在处理表单的情况下,可以考虑使用box-sizing:border-box,这个属性非常好用,很容易处理input等相关元素的宽度一致问题。下一篇分析使用box-sizing。
Web Fundamentsals学习1-Multiple-Screen-Site,布布扣,bubuko.com
时间: 2024-10-30 16:30:20