课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > 自适应网页制作技巧
  • 自适应网页制作技巧

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

  • 自适应网页是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的区别

最新开班日期  |  更多

WEB零基础周末班

WEB零基础周末班

开班日期:2-28

WEB零基础全日制班

WEB零基础全日制班

开班日期:2-28

WEB前端业余班

WEB前端业余班

开班日期:2-28

WEB前端就业班

WEB前端就业班

开班日期:2-28

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56