各种设备的移动网页设计

Question

我是新手开发移动设备网站，​​并从那些比我更了解的人那里寻找一些见解。自从开始这个项目以来，我了解到iphone和Android之间存在很多差异，我认为这主要是由于设备的像素密度。我已经将一些设备查询合并到我的CSS中，以便在显示页面之前确定用户设备的像素密度。

我将继续尝试调整CSS以调整各种设备上的不同变量，但是在一个设备上工作的不适用于另一个设备（即：字体大小，行高等）。

我的问题是...... 变量是什么决定了我的网站在不同设备和操作系统上的显示方式？我只知道一个，那就是像素密度。除设备宽度和高度外还有其他吗？是否需要针对纵横比？

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

我正在处理的网站可以在http://m.usci.westondev.com查看。

Answer 1

要确定网站在不同设备上的显示效果，您需要设置devices breakpoints 一个好的开始是媒体查询，如bellow

    /* 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) {
    ...
    }

可以找到更详细的教程here，此answers也可以提供一些漂亮的