网页制作时适应不同浏览设备的方法

网页自适应可使网站从不同分辨率显示器到智能手机或其他移动产品设备上具有更好的用户体验，具体操作方法如下：

1、在HTML头部增加viewport标签。

在网站HTML文件的开头<head>...</head>中，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：

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

这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。

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

例如使用如下的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div自适应屏幕</title>

<style>

　　.my-div{

　　}

　　/*如果设备的分辨率小于或等于768px像素，则div宽度为500px*/

@media screen and (min-width: 768px){ .my-div｛width:500px; }｝

/*如果设备的分辨率小于或等于992px像素，则div宽度为700px*/

@media screen and (min-width: 992px){ .my-div｛ width:700px; }｝

/*如果设备的分辨率小于或等于1200px像素，则div宽度为900px*/

@media screen and (min-width: 1200px){ .my-div｛width:900px; }｝

</style>
</head>
<body>

3、布局宽度使用相对宽度。

网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。

4、页面使用相对字体

在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），两者换算关系是：em = px/16 ，例如16px就等于1em。

使用网页自适应方法确实可以解决从桌面电脑显示器到智能手机或其他移动产品设备上浏览的兼容性问题。但每个人网页情况各有不同还需要注意很多细节，如，顶部导航栏的CSS需要使用绝对定位否则会出现错位等。

posted on 2015-05-24 20:08 juesi 阅读(207) 评论(0) 收藏举报