网页自适应设计让你轻松搞定

2014-12-17 10:21:38

可以说在现在青岛网站设计中自适应网页设计，如今非常的新颖潮流，这种设计可以根据用户的窗口大小，进行不同的改变。而且在规定的范围内可以提供稳定的视觉体验。但是也有弊端，就是不适应老旧或者不标准的浏览器，就会导致🐭兼容性差。下面我就详细的讲解：

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

　　例如使用如下的代码，可以让屏幕宽♛度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blogꦗ，WordPress相关标签名称只需修改一下即可。

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

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

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

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

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

3、页面使用相对字体

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

根据上面讲述的几点内容，我针对我𒈔博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题。

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

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

总结，你可以根据上面的四个步骤进行修改学习，你会觉得很简单就学会了将一个网站修改成了自适应的网页效果，可以说大大提高了手机用户的体验。同时也对青岛网站建设增加了一份力量。