响应式 Web 设计 - Web 开发 编辑

随着越来越多的用户使用移动设备来浏览网站和应用,Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作,并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 "移动优先" 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标,您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上,实现跨全部硬件平台访问和适应。

这种方法被称为“响应式 Web 设计”。它的一些策略包括::

  • 流式布局: 按照浏览器视窗的百分比来设定所有容器的宽度,从而使容器在浏览器窗口大小变化时自动缩放。
  • 媒体查询: 基于显示设备的物理特性(例如:尺寸、分辨率、宽高比、颜色位深等)来调用不同的样式表。
  • 流式图片: 设置图像所占宽度至多为设备的最大宽度。

Firefox Marketplace 的最低需求

如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace,那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度,以至于没有相应地调整字体大小和触摸目标。欲了解更多信息, 请参阅 Marketplace 审查准则

相关资源

概述

技术文档

工具

样例

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:140 次

字数:4841

最后编辑:7 年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文