谈一下响应式网站的设计原则

最新推荐文章于 2025-02-20 09:40:42 发布

转载最新推荐文章于 2025-02-20 09:40:42 发布 · 712 阅读

文章标签：

#响应式 #网站设计

网页设计专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨响应式网页设计（RWD）的概念，介绍如何利用HTML5、JavaScript和CSS创建可适应各种设备布局、样式和内容的网站。重点阐述RWD的核心原则，包括建立流动布局、使用CSS3 Media Queries、自适应图片等，并讨论实施响应式设计时需考虑的优化策略，如针对不同设备和网络速度优化图片、改变导航模式、动态调整字体大小等。

应用背景
随着各个终端设备的兴起，从现有桌面网站创建移动应用网站有多种方式：原生应用，为每种移动操作系统开发一个应用；嵌入式HTML 5，使用PhoneGap或者类似的工具；在服务端过滤，分别为桌面和移动设备建立网站，在两者间进行重定向。但是为每一种终端建立一套应用的成本，已经越来越大，所以响应式(RWD)的设计应用越来越广泛。
使用技术
使用HTML 5、JavaScript和CSS创建响应式网站，根据设备即时调整布局、格式和内容。RWD的主要好处是避免内容的重复，使网站能够适应所有设备，包括未来设备的尺寸。缺点是需要优秀的CSS和JavaScript技能，有些资源在移动网络中太大，针对旧版本的浏览器需要Polyfill。
遵循原则
建立流动布局（Fluid layout）。所有容器的宽度必须定义成浏览器Viewport的百分比。
使用CSS3 Media Query。针对不同的媒体类型如屏幕、打印机、电视等等，以及不同的媒体参数，如宽度、高度、颜色、分辨率等等，使用不同的样式。
使用自适应图片（Fluid image）。图片尺寸可以自适应，不超过最大显示宽度。
要决定样式适用于哪种媒体类型，你需要确定有哪些不同的显示宽度。例如，www.time.com使用了Media Query相关的40多种样式。可以通过Chrome扩展Responsive Inspector查看。通过这些样式，time.com的内容将在浏览器层面自动布局，因此即使在不同宽度的设备上显示，页面也不需要水平滚动。
响应式网站设计还需要考虑：
为不同的设备和网络速度优化图片；
为移动UI/UX改变导航模式；
改变链接和按钮的样式，使其适于触摸；
动态调整字体大小，以适应不同的屏幕分辨率；
按需加载内容，而不是隐藏起来；
提供图形的Retina版本。
可以使用Foundation创建响应式网站，Foundation是一个开源的响应式前端框架。另一个类似的大家接触的比较多的解决方案是Bootstrap，它最初由Twitter开发。