合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

自适应网页制作技巧

  • 时间:2016-08-04
  • 发布:合肥web培训
  • 来源:达内新闻

自适应网页是web前端里面一个很实用的技巧,学会这个技巧之后就不必一个一个的调试各种代码了。合肥web前端培训的老师来介绍一种自适应网页的方法。

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

在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:
<meta name="viewport" content="width=device-width, initial-scale=1" />
这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。

2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对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页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。

5、图片自适应(非必要)

img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }

css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;

根据以上步骤,一个自适应网页就基本完成了。学习更多web前端技巧,欢迎参加合肥web前端培训,赶快报名吧。
上一篇:CSS3菜单插件分享
下一篇:Cookie与Session的区别

JavaScript是真正的 OOP 语言吗?

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

选择城市和中心
贵州省

广西省

海南省