移动设备正超过桌面设备，成为访问互联网的最常见终端而且手机屏幕的大小也不一用户量比较大的ihpone4 5 屏幕大小只有3.5寸和4寸，而国产大部分手机的屏幕已经达到4.7寸以上了。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

 

在通常我们做电脑PC版网站的时候设计页面宽度就是以满足最低标准1024分辨率宽度；通常会采用标准960px宽；而随着现在的发展屏幕大小也逐渐增大，所以这样也不能很好的解决大屏幕的显示效果；这个宽度在手机设备中显然是不能很好的呈现网站内容的；所以也有很多设计师采用不同设备设计不同的页面；这样做是非常麻烦；
解决方案： 百分比设置最大宽度此方案可以适用于手机网站设计；
宽度我们以百分比来定义设置最大宽度640px max-width:640px；不管设备屏幕多大都按设定的百分比来显示；在手机网站还是可以的，因为目前来说手机最大的屏幕和最小的屏幕相差不会大太；然后通过以在head中添加以下元素来定义满屏显示控制缩放
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0\" />
这样一个简单的自适应手机网站就可以很好的设计出来了. 这段自适应的代码是关键。