【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

响应式网站设计原则

  • 2014-06-13
  • 本文字数:837 字

    阅读完需:约 3 分钟

QA TechWeek 2014 期间,QA 公司首席技术专家 David Walker 在使用 Foundation 进行响应式设计的会议上,提出了响应式网站设计的原则。Walker 提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用;嵌入式 HTML 5,使用 PhoneGap 或者类似的工具;在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向。

分析完每种方法的优缺点后,Walker 提出了响应式设计(RWD),使用 HTML 5、JavaScript 和 CSS 创建响应式网站,根据设备即时调整布局、格式和内容。RWD 的主要好处是避免内容剃重复,使网站能够适应所有设备,包括未来设备的尺寸。缺点是需要优秀的 CSS 和 JavaScript 技能,有些资源在移动网络中太大,针对旧版本的浏览器需要 Polyfill。

要做到响应式设计,Walker 建议遵循以下原则:

  • 建立流动布局(Fluid layout)。所有容器的宽度必须定义成浏览器 Viewport 的百分比。
  • 使用 CSS3 Media Query 。针对不同的媒体类型如屏幕、打印机、电视等等,以及不同的媒体参数,如宽度、高度、颜色、分辨率等等,使用不同的样式。
  • 使用自适应图片(Fluid image)。图片尺寸可以自适应,不超过最大显示宽度。

要决定样式适用于哪种媒体类型,你需要确定有哪些不同的显示宽度。例如, www.time.com 使用了 Media Query 相关的 40 多种样式。可以通过 Chrome 扩展 Responsive Inspector 查看。通过这些样式,time.com 的内容将在浏览器层面自动布局,因此即使在不同宽度的设备上显示,页面也不需要水平滚动。

Walker 表示,响应式网站设计还需要考虑:

  • 为不同的设备和网络速度优化图片;
  • 为移动 UI/UX 改变导航模式;
  • 改变链接和按钮的样式,使其适于触摸;
  • 动态调整字体大小,以适应不同的屏幕分辨率;
  • 按需加载内容,而不是隐藏起来;
  • 提供图形的 Retina 版本。

Walker 还演示了如何使用 Foundation 创建响应式网站,Foundation 是一个开源的响应式前端框架。另一个类似的解决方案是 Bootstrap ,它最初由 Twitter 开发。

查看英文原文: Guidelines for Responsive Website Design

2014-06-13 09:383590

评论

发布
暂无评论
发现更多内容

ChatGPT“爆红”启示:工业AI如何掀起新型“工业革命”?

Openlab_cosmoplat

人工智能 开源 工业 智能制造 ChatGPT

软件测试 | HTTPS 的通信加解密过程,证书为什么更安全?

测吧(北京)科技有限公司

测试

猫咪在逐步壮大--PUSS通证深度解析

股市老人

LP分红、加池分红U、杀机器人、防巨鲸、八代邀请分红的智能合约教程

加密先生

架构作业-8

梁山伯

十五年,始吾心

博睿数据

可观测性 智能运维 博睿数据 15周年 品牌历史

足不出户,搞定IoT设备故障诊断和恢复——实践类

阿里云AIoT

阿里云 物联网 IoT

PCB板漏孔、漏槽怎么办?看工程师避坑“SOP”

华秋PCB

PCB 电路板 PCB设计 钻孔

一次配置,设备就可实现毫秒级的全球就近接入——实践类

阿里云AIoT

阿里云 物联网 IoT

链上抢币机器人什么原理?夹子开发源码公开

加密先生

FlagOpen大模型技术开源体系,开启大模型时代“新Linux”生态

硬科技星球

DockQuery 天狼 v1.2.0 正式发布

BinTools图尔兹

#数据库

Camtasia 2023体验版有哪些新功能

茶色酒

Camtasia Studio2023

ONES 获得 SOC2 Type1 鉴证报告,数据安全能力受权威认可

万事ONES

我嘞个去——原来软件开发根本不需要会编码(看我10分钟应用上线)

这我可不懂

程序员 软件开发 低代码平台 应用开发 JNPF

mysongbook2023吉他谱永久免费版

茶色酒

mysongbook2023

Exposure2023绿色版本人像滤镜插件下载

茶色酒

Exposure2023

安卓手机的网络权限,全网最全解答

神锁离线版

android 互联网 安卓 网络权限 安卓权限

IoT生态构建:AIoT认证设备中心——实践类

阿里云AIoT

阿里云 物联网 IoT

存量设备 0 改造,平滑迁移阿里云 IoT 物联网平台最佳实践——实践类

阿里云AIoT

阿里云 物联网 IoT

腾讯云助力河北打造人社一体化公共服务平台,显著提升治理能力和服务水平

科技热闻

API+DevOps:华为云API Arts一体化平台,端到端呵护您的API

科技怪授

API 华为云

小程序与微服务架构如何进行结合

Onegun

小程序 微服务架构 移动开发

Unity 荣膺 2022 鲸鸣奖“影响力出海品牌”及“新势力出海服务商”两项大奖

Geek_2d6073

一文读懂Vue开发小程序的技术原理

没有用户名丶

OpenMLDB SQL 与标准 SQL 的主要差异

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

江苏鸿程大数据:基于鲲鹏DevKit开发数据报告生成平台,数据库查询效率提升30%

Geek_2d6073

Airserver2023免费手机投屏电脑工具

茶色酒

AirServer2023

OpenMLDB 社区月报 | 2023 年 2 月

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

AntDB数据库首个社区版正式发布,携手生态更多可能

亚信AntDB数据库

AntDB 国产数据库 AntDB数据库 企业号 3 月 PK 榜

前端刷完这12道滑动窗口,就可以出山面试了

js2030code

JavaScript LeetCode

响应式网站设计原则_移动_Abel Avram_InfoQ精选文章