Question

html5怎么实现在不同设备上都正常显示？

Answer 1

html5使用媒体查询技术能实现不同设备上的响应式布局。

@media screen and (min-width:600px) {
  .nav {
    float: left;
    width: 25%;
  }
}@media screen and (max-width:599px) {
  .nav {
    float: right;
    width: 50%;
  }
}

如上图代码通过@media screen语法，在设备不同宽度的情况下可以给同一个类赋予不同的样式，即可实现不同设备上的正常显示了。

Answer 2

仅仅凭分辨率来判断浏览器是片面的，比如现在很多手机分辨率都达到2k水准了。建议使用js判断客户端类型，然后在用js加载css。

Answer 3

简单说，CSS media query。具体实现就比较复杂了，比如media query各浏览器支持程度不一。此外在技术实现之前，首先你在设计层面要有这个意识。有时候，适配不仅仅是分辨率（resolution）问题，还有DPI问题。另外还有操作差异，比如触摸（手持设备）还是鼠标（desktop）还是遥控器（Web TV）。在许多场合下，还是会考虑做独立的版本，而不是在一个版本里进行适配。

Answer 4

建议使用一些框架 像JQUERYMOBILE之类的成熟一点的模版 没有特殊需求基本都是自动适应的