手机浏览器不同，分辨率不同，如何才能在不同的终端自动调用预设的样式
可以参考这篇文章http://www.cnblogs.com/PeunZhang/p/4517864.html（【原】pageResponse - 让H5适配移动设备全家(移动端适配)）
难道不是用css3的媒体查询吗？你用bootstrap或者amaze UI 天生就支持响应式了
自适应布局就好了呀，现在很多网站都是这样
【转一下自己的答案】
其实可以使用rem。
rem 是一个近几年才被大力倡导的 css 单位，确实是个新东西，= - =不过，这位同学，你不要担心，好在移动端都支持这个。
rem 的原理其实有点类似 Android 上的 dp，异曲同工之妙，如果这位同学搞过 Android 开发，可以直接跳过下面的解说，开干了。
解说
假如
html{
font-size:50px;}
那么 1rem = 50px。
rem 的大小始终与 html 的 font-size 大小相关。
这有什么用呢？
举个场景吧，比如你家的设计狮设计喜欢用 iPhone 6 做模板，然后划定好了所有的距离啊比例什么的。
这个时候你开始编码了，你发现虽然同样是 100px，在 800600 的屏幕上和 1920 1080 上的展现是完全不一样的，在大屏上看上去就像缩放了一样，非常的小。Android 机的像素密度还都不一样，简直虐哭。
实操
我们假设所有的屏幕上展现的效果要一致，那么同样是 iPhone 6 的 100px 在别的手机上肯定要长度不同才行。那么我们约定一个屏幕的宽是 7.5 个rem，那么在不同手机上，1 rem 的大小可以是不同的，那么我们可以通过js动态的计算出不同设备上 rem 的大小写入 html 的 font-size 中动态的适配。
如果嫌 js 难写，你也可以用 @media 约定几个常见的设备。
这个时候你的 100px，就不要写 100 px了，就要换算成 rem 的大小了，比如我这里 1 rem = 50px，那么就是 2rem，所有设备都是 2rem，当然视觉效果就一致了，是不是很简单，除一除就 ok 了。
不过在 Android 上 浏览器 webkit 版本 37 以下的获取的屏幕宽度和 37以上的不一样，因为有个像素密度的问题，这个= m = 我会开专栏专门讲讲这个问题。。
至于如何让小图标适配不同屏幕，如何让不同图片适配不同屏幕，也会讲讲，也可以先看看这里。。我正在开坑
http://blog.zach-hu.me/post/2015-10-25-wei-xin-zhong-de-angularjs-kai-fa
后面会转到 sf 的专栏中