android app 适应不同大小屏幕_开发的Webapp如何能够自适应手机屏幕的大小？

【转一下自己的答案】

其实可以使用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 = 我会开专栏专门讲讲这个问题。。

至于如何让小图标适配不同屏幕，如何让不同图片适配不同屏幕，也会讲讲，也可以先看看这里。。我正在开坑

后面会转到 sf 的专栏中