自适应网站设计（自适应网站设计）

大家好，小经来为大家解答以上问题。自适应网站设计，自适应网站设计很多人还不知道，现在让我们一起来看看吧！

1、 将viewport标签添加到HTML标题。

2、 在网站HTML文件的开头添加viewportmeta标签，告诉浏览器viewport宽度等于设备的屏幕宽度，不会进行初始缩放。代码如下：

3、 metaname='viewport'content='width=device-width，initial-scale=1'/

4、 这段代码支持Chrome、Firefox和IE9以上的浏览器，不支持IE8和IE8以下的浏览器。

5、 在CSS文件末尾添加不同屏幕分辨率的规则。

6、 比如使用下面的代码，当屏幕宽度小于480像素时(比如iPhone)，可以自动调整网页侧边栏中间内容栏的宽度。下面的代码是针对Z-Blog的，只需要修改WordPress相关的标签名。

7、 @媒体屏幕和(max-device-width:480px){#divmain{float:none；width:auto}#divSidebar{display:none}}

8、 布局使用相对宽度。

9、 整个web框架可以使用绝对宽度，但最好对向下的内容框架、侧边栏等使用相对宽度。以便于针对不同的分辨率进行修改。当然你也可以不使用相对宽度，所以你需要在@mediascreenand(max-device-width3360480px)中为小屏幕增加每个div的宽度，这样其实更麻烦。

10、 使用页面相对字体(不必要)

11、 在HTML页面上使用相对字体，而不是绝对字体。对于大多数浏览器来说，通常用em=px/16来换算，比如16px等于1em。

12、 图像适应(不必要)

13、 Img标签，只需设置max-width:100%%；或宽度：100%；说法是：img{max-width:98%；}

14、 css加载的背景图片如何适应它的大小？其实可以在CSS3中实现。添加以下语句：background-size:100%100%；

15、 根据以上几点，可以解决恼人的浏览器兼容性问题。

本文到此结束，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！