如何制作手机自适应网页

自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备上具有更好的阅读体验，今天小编主要给大家分享如何制作手机自适应网页，希望对你们有帮助!
 

1.在HTML头部增加viewport标签
 

在网站的HTML文件的开头，添加viewport meta标签，告知浏览器视口宽度等于设备屏幕宽度，无需初始缩放。代码如下:
 

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

2.在CSS文件末尾添加不同屏幕分辨率
 

例如，可以让屏幕宽度低于480像素的设备(如苹果手机等)，网页侧栏隐藏中间内容栏的宽度自动调节，以下代码适用于针对Z-Blog，WordPress相关标签名称只需修改一下即可。
 

@media screen and (max-device-width: 480px) {
 

#divMain{
 

float: none;
 

width:auto;
 

}
 

#divSidebar {
 

display:none;
 

}
 

}
 

3.布局宽度使用相对宽度
 

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

4.页面使用相对字体
 

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

根据上面提到的内容，我针对博客的CSS做了一些修改，发现可以从苹果手机浏览到体验更好的页面。但是，有一个问题尚未解决，即顶部导航栏中navbar的显示存在问题，这将在换行后被下面的文章盖住了。大家可以在导航栏divNavbar的样式中加入 overflow:hidden，一行就可以解决这个问题。
 

经过修改CSS为自适应页面后的月光博客首页页面，看起来比原始的未优化页面好得多。
 

总之，根据以上四个修改步骤，网站可以简单地修改成适合各种设备浏览的页面，这对手机访问网站的用户来说确实是件好事。