em/rem写手机页面的一种写法(1)

（这几天接触了不少前端，才知道自己才是不折不扣的“异教徒”，自适应也不是我理解的那样的，于是把文章标题改了下，内容是没改的，但也不能说我错了，只能说这是一种实现的方法吧。。2016/3/28）

关于自适应，这个称呼还是在前端Q群里听来的，我不是很确定它的概念。他们（Q群上某些人）说它（和那个响应式）表示布局会自动适应手机。

其实你html稍微好一点会发现这个其实不是很难，你只需把你的div写成宽度百分比。

当然还有几个必要的部分：

1、缩放。你可以尝试着加和不加这个代码，方正写自适应我是都会加这一段的。至于喜欢寻根究底的童鞋可以看一下这篇文章，或者自行百度“meta viewport”。

    <meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">

2、高度、字体大小。

　　我相信这才是大多数人觉得写自适应比较麻烦的地方，毕竟宽度可以写成百分比可是高度跑不了，字体大小也一样。

　　rem/em正是解决这个问题的一种方法。我们先看一下另一种比较笨的方法。

@media screen and (max-width: 320px) {
    div {height:50px}
}
@media screen and (min-width: 320px) and (max-width: 640px) {
    div {height:80px}
}
@media screen and (min-width: 640px) {
    div {height:100px}
}

用上面的css，再随便建一个div，你会发现div的高度会根据页面大小变化。其实语句很简单，光看也能猜出来是什么意思了。这不禁让我们想到，可以再细分一些，写到每一像素，那么高度问题，文字大小问题（只需把height换成font-size）不就迎刃而解了么。不过也绝没有一个程序员会这么做，除非。。呵呵

我们可以用js来做这件事情，先是获取页面宽度，然后再根据页面宽度计算出height的值再赋予div。好像很难？其实不会。

　　比如div我想它在640px的屏幕上显示是100px的高，并等比例缩放。那么在320px的屏幕上它就应该是50px高。因为640刚好是320的2倍，那么高度与屏幕宽的关系就是：

高度 = （屏幕宽/640）*100px

 换成js就是：

var w = window.innerWidth;
var d = document.getElementById('aa');　　//这里aa是div的id
d.style.height = (w/640)*100+'px';