手机端的宽度

当我们在编写手机端页面时，需要兼容各种宽度的手机，这个时候，对于大的包裹元素，一般不会直接设置其宽度，这个时候，可以使用css3的calc函数，它的使用语法为

calc(expression); 其中这个expression可以包括任何css的长度度量方式，例如：百分比、rem、em等。我们知道，当我们对一个元素设置width: 100%时，表示，它的元素宽度为它的containing box的宽度，如果我们想让这个元素在任何宽度的手机上，离左右两边的间隔都为4px，那么，我们可以这样设置：

width: calc(100%-8px)

margin-left: 4px;

我们经常会用到rem，我们都知道rem是个相对单位，1rem代表多少px要根据html中设置的font-size决定，我们经常会看到

html{
   font-size: 62.5%
}

这是什么意思呢，为什么是62.5%呢，原因是如果我们不设置页面的font-size，它的默认值是16px，那么，16 * .625 = 10px， 就是说，为html添加了这个设置后，1rem ＝ 10px。

然而，这样设置貌似没有多少用处，如果我们将rem和vw结合起来，将会有很大的用处，我们可以实现，一套css代码，适用于所有屏宽，随着屏幕的大小改变，页面中的元素等比例缩放。那么，怎么做呢？

@media screen and (min-width: 375px){
	html{
		font-size: 26.666666666666668vw!important;
	}
}

以上代码以iphone6屏宽为基准，当屏宽等于375时，1rem＝100px。如何算出来的呢，由于1vw的定义为1/100屏宽，所以，26.666666vm ＝ 26.666666668 *( 1/100 )* 375 = 100 px。因此，在iphone6上，1rem ＝ 100px，而在屏宽大于375的手机中，1rem就等比的扩大了。一般设计给你的设计图是按照iphone6为基准的，所以，在代码中，只要按照iphne6的尺寸就写，就可以实现自适应所有屏宽大于375的手机了。而对于屏宽小于375的手机，可以使用@media来实现。