jquery - 如何开发一个用于视网膜显示的网站？

Question

我必须开发一个具有 4 种设计的响应式网站 [台式机、移动设备、平板电脑和视网膜显示器]。

前三个很好，可以完成，但视网膜显示是一个新事物。因此，如果有人能分享为它开发 HTML 的正确方法，那将非常有帮助。

Jquery 的任何插件，HTML/CSS 的 Hack 都会有所帮助！非常感谢！

Answer 1

您可以使用一些 CSS 框架，例如

1. 骨骼
2. 基础

并在 Google 中搜索响应式网页设计

对于视网膜显示和移动布局使用媒体查询

这是一个来自 CSS-tricks 的链接，这将是有帮助的 Css-tricks

Answer 2

在 iPhone/iPad 上，iOS 非常聪明，无需您的帮助就可以让事物看起来不错。虽然我没有尝试过，但我确信 OSX 对配备 Retina 的台式机/笔记本电脑也是如此。

但是，您绝对应该考虑/用户有几件事：

• 视口元信息

• 使用矢量图形来避免看起来模糊的图像（由于 Retina 具有更高的 PPI，因此必须缩放光栅图形）

• 保持页面轻巧快速（移动设备的一般良好规则）

• CSS 媒体查询（响应式开发的一般良好规则）

• 熟悉-webkit前缀专有的 CSS 属性，这些属性可以对许多事情进行细粒度控制。

• 经常测试！大多数时候，我对“正常工作”的效果（以及在高 PPI 下它们看起来有多棒）感到惊喜，但它并不总是按您期望的方式工作。

Answer 3

每当我创建网站时，我都会使用Retina.js。如果用户有视网膜显示器，它会自动用服务器上的高分辨率替换页面上的低分辨率图像。