如何制作手机自适应网页

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

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为自适应页面后的月光博客首页页面，看起来比原始的未优化页面好得多。

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

尊重原创文章，转载请注明出处与链接：https://m.qinxue365.com/jsjzx/Web_Design/621194.html，违者必究！