如何解决手机网站的自适应问题

说起手机网站的开发,最让新手脑大的问题，莫过于网站的自适应了。我当初也被这个问题 困扰得抓耳挠腮，因此总结一些方法希望能帮到大家。

1、使用meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。是自适应的必需代码。

手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

viewport标签及其属性：

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

每个属性的详细介绍：



2、使用媒体查询

媒体查询是在css3中为解决自适应问题，提供的解决方法。其原理是，在不同的屏幕尺寸使用不同的css样式。

例如：

@media only screen and (max-width: 640px) {
body {
font-size：100px；
}
}

3、尽量使用百分比

对图片或者段落都使用百分比，因为body的默认宽度是屏幕尺寸，都可以根据其父元素，设置百分比。

4.使用css3单位rem

rem是CSS3新增的一个相对单位（root em，根em）,指的是相对于HTML根元素的字体大小。默认html的font-size是16px，即1rem=16px。

通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

聪明的程序猿，看到这一功能，发现了进化的机会。于是通过js动态获取屏幕宽度，设置html的font-size值，即可控制rem单位缩放，即可达到页面整体适应的效果.

js代码:

!(function(win, doc){
function setFontSize() {
// 获取window 宽度
var docEl = doc.documentElement;
var winWidth = docEl.clientWidth;

if(winWidth<=640){
doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;}
else{
docEl.style.fontSize=100+"px";
}
}

var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

var timer = null;

win.addEventListener(evt, function () {
setFontSize();
}, false);
win.addEventListener("pageshow", function(e) {
setFontSize();
}, false);

// 初始化
setFontSize();

}(window, document));

除了上面的方法，类似的方法还有使用响应式框架boostrap，使用em单位等，但就效果和便利程度而言，优先推荐使用rem单位和相应的js，实现移动页面的自适应。