如何搭建一个自适应网站？

大家好，我是苏承栈。今天我们来聊聊如何搭建一个自适应网站。自适应网站设计，顾名思义，就是能够自动适应不同屏幕尺寸的网站，让用户在任何设备上都能获得良好的浏览体验。

一、允许网页宽度自动调整

首先，在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

这行代码的意思是，网页宽度默认等于屏幕宽度，原始缩放比例为1.0。对于不支持该设置的浏览器，我们可以通过JavaScript来动态生成viewport标签。

var phoneWidth =  parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.$1);
if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
} else{document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
} else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}

二、CSS文件尾部增加针对不同屏幕分辨率的规则

例如，使用以下代码可以让屏幕宽度低于480像素的设备隐藏侧栏，并自动调节中部内容栏宽度。

@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}

三、相对字体大小

字体大小也应该使用相对大小，如em或rem，而不是绝对大小如px。

body {
font: normal 100% Helvetica, Arial, sans-serif;
}
h1 {
font-size: 1.5em;
}
small {
font-size: 0.875em;
}

四、流动布局（fluid grid）

流动布局意味着各个区块的位置都是浮动的，而不是固定不变的。

.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}

五、图片的自适应

图片也需要实现自适应，可以使用以下CSS代码：

img { max-width: 100%; }
img, object { max-width: 100%; }
img { width: 100%; }
img { -ms-interpolation-mode: bicubic; }

通过以上步骤，我们可以简单制作出一个自适应网站。记得，细节决定成败，每个元素都要经过精心设计。

我是苏承栈，来自「极星编程网」（www.jxgpc.com）。如果你对自适应网站设计还有更多疑问，欢迎访问我们的网站，了解更多精彩内容。