各种设备的移动网页设计

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

我继续尝试调整CSS来调整各种设备上的不同变量，但对其中一个不起作用的另一个（即：字体大小，行高等）不起作用。

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

任何洞察力，你可以给我非常感谢。

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

来源

2013-03-08 Weston Distance Learning

要确定网站的外观在不同的设备，你需要设置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) { 
    ... 
    }

一个更详细的教程可以发现here，这answers也给一些漂亮

来源

2013-03-08 17:43:33 MimiEAM

是的，我确实了解它的一部分。但上面的媒体查询示例严格基于宽度。我应该考虑哪些其他因素？像素密度怎么样？ – 2013-03-11 14:19:52

在做响应式设计时，还有许多其他因素，其中一些或它们正在使用流体介质和流体网格，以按照您想要的方式影响元素布局。通过媒体查询，您还可以定位非常特定的设备（例如，为iPhone4S定义样式，为Iphone5定义另一种样式 - 这可能是额外的工作），也可以使用像素密度进行排版和图像渲染，参见http：// menacingcloud。 COM/C = highPixelDensityDisplays – MimiEAM 2013-03-11 18:06:47

各种设备的移动网页设计

回答

相关问题