0

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

我正在继续尝试调整 CSS 以适应各种设备上的不同变量，但在一个设备上有效的方法在另一个设备上无效（即：字体大小、行高等）。

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

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

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

4

1 回答 1

2

要确定网站在不同设备上的外观，您需要设置devices breakpoints 一个良好的开始是如下所示的媒体查询

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

可以在这里找到更详细的教程，这个答案也给出了一些漂亮的

于 2013-03-08T17:43:33.107 回答