一次说清楚，以后不要再问我移动端怎么适配了！

前言：

首先，这篇文章讲的是网页在移动端的适配问题，这里面没有物理像素之类的事，这是两个东西，别混为一谈！有些人为了博眼球，一上来就是什么物理像素，像素比之类的字眼，这俩东西对移动端确实有影响，但是没那么大，基础的同学不需要去深究。

 

第二，适配是一件特简单的事情，别想太复杂。像什么数学换算之类的，如果数学不太好的同学也不用太焦虑，现在开发有很多辅助工具，世界上有几个人能弄懂1+1为什么等于2？开开心心的敲代码它不香么？

第三，这篇文章讲得会比较简单直接，如果想要更加深入的了解，以及想知道为什么会有物理像素，像素比之类的概念，以及它们对于移动端的影响，请看下一篇

 

我们知道，随着移动互联网的发展，现在已经很少人会再电脑上去看网站了，所以作为开发者，我们顺其自然，必须要去优化自己的网站，让它在手机上依然可以正常显示，这也是为什么会出现适配这个问题的根本原因：要把一个那么大的网站放到手机上去

首先，来看看手机上网站的效果

先来思考一个问题，如果想要像右边手机上那样，在页面中显示一个宽度为屏幕宽度50%的色块，应该怎么做？

 

这个我估计大家都知道，写个div，宽度50%不就好了？

但是如果box的外面有一个父级，并且不确定父级的宽度时多少的时候，如何保证box的宽度是屏幕宽度的一半呢？

<div class="main">
  <div class="box"></div>
</div>

因为css中，宽度如果给百分比，那么这个元素的宽度时根据其父级的宽度来计算的，也就是说在上面的代码中，如果main的宽度是屏幕宽度的一半&#