《响应式Web设计实践》一2.5 结束语

简介:

本节书摘来异步社区《响应式Web设计实践》一书中的第2章,第2.5节,作者: 【美】Tim Kadlec 译者: 侯鸿儒 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.5 结束语
响应式Web设计实践
大多数情况下,流动布局(以百分比为单位,因而可以根据屏幕大小来调整自身的布局)是你设计站点时的最佳选择。当宽度被字体大小限制时,你可以使用弹性布局;当宽度被百分比限制时,你可以使用流动布局。

采用更加灵活的方式来指定文字大小可以使维护工作变得更加容易,同时这样做也提升了站点的可访问性。为了达到这个目标,我们就要坚持使用百分比和em,尽管rem在未来很有潜力。

通过定义网格,有助于为你的网站提供良好的结构并增加一致性。要试着从内容出发来建立你的网格,而不是随意拿一个事先就定义好的网格来用。这就意味着我们要根据行宽、图片、广告大小或者其他标准来建立网格。

将固定单位转换为灵活的单位与计算一道除法题一样简单,因为在指定元素宽度以和字体大小时,你用的都是那个方程式。

通过使用CSS表格,你可以很容易地将固定宽度与流动宽度结合使用,现代的桌面浏览器对此特性都有着极为出色的支持,而且你还可以通过使用条件注释来为IE 7及以下版本的IE浏览器提供备用样式。

现在,“另一个体育网站”的文章页面的布局已经变得灵活了许多,而且相比采用固定布局也能够适应更多种类的分辨率了。然而它现在还不是真正响应式的,因为当浏览器变得很窄的时候,我们依然会遇到很多样式上的问题,而且如果屏幕太宽的话,我们的设计也不是特别整洁。

在下一章中,我们将使用媒介查询来解决上面这些问题。媒介查询使我们可以根据用户使用的设备来改变页面的样式,这一强大的技术将带领我们走向真正的响应式设计。

相关文章
|
1月前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
1天前
|
缓存 监控 前端开发
探索现代Web应用的性能优化实践
【5月更文挑战第10天】随着互联网技术的飞速发展,用户对Web应用的响应速度和流畅度要求越来越高。性能优化已成为前端开发中不可或缺的一环。本文将深入探讨Web应用性能优化的关键策略,包括代码分割、资源压缩、缓存利用、服务端渲染等技术手段,以及如何通过工具进行性能监测和分析。我们将从原理出发,结合实际案例,帮助开发者构建更快速、更高效的Web应用。
|
5天前
|
开发框架 JSON .NET
.Net4.0 Web.config 配置实践
.Net4.0 Web.config 配置实践
|
9天前
|
存储 前端开发 安全
13:会话跟踪技术Session的深度应用与实践-Java Web
13:会话跟踪技术Session的深度应用与实践-Java Web
24 3
|
9天前
|
存储 前端开发 搜索推荐
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12:会话跟踪技术Cookie的深度应用与实践-Java Web
23 4
|
9天前
|
前端开发 JavaScript
深入理解与实践:Web异步请求中的返回值处理策略
深入理解与实践:Web异步请求中的返回值处理策略
14 0
|
12天前
|
前端开发 JavaScript 开发者
前端技术栈:探索现代Web开发的核心要素与代码实践
前端技术栈:探索现代Web开发的核心要素与代码实践
21 1
|
12天前
|
前端开发 JavaScript 开发工具
前端技术栈:构建现代Web应用的基石与实践
前端技术栈:构建现代Web应用的基石与实践
22 3
|
17天前
|
开发框架 前端开发 数据库
Python从入门到精通:3.3.2 深入学习Python库和框架:Web开发框架的探索与实践
Python从入门到精通:3.3.2 深入学习Python库和框架:Web开发框架的探索与实践