如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

    如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

    如果屏幕宽度在400像素以下，则6张图片分成三行。

    自适应网站实施方法

    选择加载CSS

     "自适应网页设计"的核心就是，自动探测屏幕宽度，然后加载相应的CSS文件。

     <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

    根据不同的页面宽度，加载不同的css样式，从而根据不同的样式使用不同的浏览版本。上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。当然，也可以使用jquery等其他js技术，加载不同的css样式。

    图片、div、table等元素自适应

    除了布局和文本，"自适应网页设计"还必须实现图片和其他元素的自动缩放。

    img { max-width: 100%;}

    对于IE6-7等不支持max-width样式的浏览器，我们只好写成：

    img { width: 100%; }

    对于windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

    img { -ms-interpolation-mode: bicubic; }

    或者，Ethan Marcotte的imgSizer.js。

　　addLoadEvent(function() {

　　　　var imgs = document.getElementById("content").getElementsByTagName("img");

　　　　imgSizer.collate(imgs);

　　});

    本硕科技在自适应网站建设上面有着丰富的经验，不仅能做到兼容主流的移动、平板、电脑设备，还能做到兼容IE6-8等低版本浏览器（很多企业自身和其客户都在使用），这也是众多网络公司都无法做到的。如有需要请联系本硕科技的销售客服。