《HTML5移动Web开发实战》—— 1.8 移动设计

简介:

本节书摘来异步社区《HTML5移动Web开发实战》一书中的第1章,第1.8节,作者:石川,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.8 移动设计

HTML5移动Web开发实战
适用浏览器:所有

桌面网站的设计趋势是固定布局(flxed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸。

1.8.1 准备

新建两个空白HTML文件,命名为ch01r06_a.html和ch01r06_b.html。

1.8.2 实践

1.在ch01r06_a.html中输入以下代码并保存:

1375cae63854c53d32156e338e228b6862646cd4

2.在ch01r06_b.html中输入以下代码并保存:

2b19b3aba8c3582ed908bae5eed8e3f9c006e85c

1.8.3 回顾

两个页面在纵向显示中看起来几乎一样,如图1-6所示。

现在旋转你的屏幕,看看发生了什么。

在横向显示中,第一个例子(见图1-7)两边出现了空白,而第二个例子(见图1-8)充满了整个屏幕。

fbf11ce63a01bb345552cc294cd1c8ab3b416a00

第二个例子有不同的结果。

024c77d58fe4bc310a32ecba659f6a0431616e17

这个页面在固定布局中看起来很奇怪,但在流体布局中正常显示。所以当你在针对移动设备做设计时,始终谨记保持这种灵活性,因为:

移动设备有横向和纵向显示。
移动设备的屏幕空间很有限,所以需要利用好每个像素。

1.8.4 延伸

CSS媒介查询(media query)是响应式设计中很重要的部分,它帮助你实现更加灵活的移动设计。

25e470922a7d7854800719d9a9271ab70ba6db91

在窄屏中,这两个section会纵向排列(如图1-9所示),而在宽屏中会横向排列,这就是CSS媒介查询的功能。在示例中,@ media screen and (min-width: 480px) {..}的样式会在480px以上宽度的屏幕中启用:

在横向显示中,两块方框并列显示,如图1-10所示。

9a2810c400318111c12e3180633ac21e979fd23b

桌面优先的网站
除了创建纯粹的桌面网站或纯粹的移动网站,我们还有其他建站的方式,其中之一就是桌面优先,并在移动设备上优雅降级。

移动优先网站
另一个方式是移动优先,并在桌面设备上优雅降级。

这种方式可以使用以下CSS:

a97329ff1833c920403d56825a456d010bbe2a76

一站方式
另一个方式是只创建一个网站,并兼顾移动和桌面设备,而不是只专注其中一个。

相关文章
|
14天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
36 3
|
14天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
19 2
|
14天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
33 2
|
14天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于Django与HTML的新闻发布系统(二)
Web实战丨基于Django与HTML的新闻发布系统(二)
19 1
|
14天前
|
存储 数据库 数据安全/隐私保护
Web实战丨基于Django与HTML的新闻发布系统
Web实战丨基于Django与HTML的新闻发布系统
17 1
|
14天前
|
存储 搜索推荐 数据库
Web实战丨基于Django与HTML的用户登录验证系统
Web实战丨基于Django与HTML的用户登录验证系统
21 1
|
19天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
22 1
|
19天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
29 1
|
4天前
|
机器学习/深度学习 Web App开发 前端开发
【Web开发】深度学习HTML(超详细,一篇就够了)
【Web开发】深度学习HTML(超详细,一篇就够了)
6 0
|
2天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。