Mobile 针对各种设备的移动web设计

我刚开始为移动设备开发网站，并从那些比我了解更多的人那里寻找一些见解。自从开始这个项目以来，我了解到iphone和Android之间有很多不同，我相信这主要是由于设备的像素密度。我在CSS中加入了一些设备查询，以在显示页面之前确定用户设备的像素密度

我继续尝试调整CSS以适应不同设备上的不同变量，但在一个设备上有效的东西在另一个设备上不起作用（例如：字体大小、行高等）

我的问题是…哪些变量决定了我的站点在不同设备和操作系统上的显示方式？我只知道一个，那就是像素密度。除了设备的宽度和高度，还有其他的吗？长宽比是否需要设定目标

非常感谢您能给予我的任何见解

---

可以在上查看我正在使用的站点。

要确定站点在不同设备上的外观，需要设置

设备断点

一个好的开始是像下面这样的媒体查询

    /* 600px/16px = 37.5em */
    @media all and (min-width: 37.5em) {
    ...
    }
    /* 940px/16px = 58.75em */
    @media all and (min-width: 58.75em) {
    ...
    }
    /* 1300px/16px = 81.25em */
    @media all and (min-width: 81.25em) {
    ...
    }

---

可以找到更详细的教程，这也给出了一些非常好的

是的，我确实理解其中的部分。但上面的媒体查询示例严格基于宽度。我还应该考虑哪些其他因素？那么像素密度呢？在进行响应性设计时，还有很多其他因素，其中一些因素使用流体介质和流体网格，以影响每个设备的元素布局方式。对于媒体查询，您还可以针对非常特定的设备（例如，仅为iphone4S定义一种样式，而为Iphone5定义另一种样式-尽管这可能是额外的工作），还可以使用像素密度进行排版和图像渲染，请参见