网页布局之自适应布局@media查询



相比较上一章说的弹性盒子,本篇的布局模式相对复杂点,但是对于某些情况下适用(对页面要求极其完美,设计师给出的稿子也是各个屏幕、浏览器的稿子), 使用@media查询,你可以针对不同的媒体类型定义不同的样式。7yi思考者日记网-束洋洋个人博客

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。7yi思考者日记网-束洋洋个人博客

 7yi思考者日记网-束洋洋个人博客

浏览器支持

chrome:版本21以上7yi思考者日记网-束洋洋个人博客
IE:版本9以上7yi思考者日记网-束洋洋个人博客
FireFox:版本3.5以上7yi思考者日记网-束洋洋个人博客
safri:版本4.0以上7yi思考者日记网-束洋洋个人博客
opera:版本9以上7yi思考者日记网-束洋洋个人博客

 7yi思考者日记网-束洋洋个人博客

一、允许网页宽度自动调整

"自适应网页设计"到底是怎么做到的?其实并不难。7yi思考者日记网-束洋洋个人博客

首先,在网页代码的头部,加入一行viewport元标签。7yi思考者日记网-束洋洋个人博客

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。7yi思考者日记网-束洋洋个人博客

二、不能适用绝对宽度,字体大小

具体的css代码不能出现XXpx,只能指定xx%,或者auto,字体也不能适用xxpx,而是使用em或者相对大小7yi思考者日记网-束洋洋个人博客

三、选择加载CSS

"自适应网页设计"的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。7yi思考者日记网-束洋洋个人博客

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。7yi思考者日记网-束洋洋个人博客

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。7yi思考者日记网-束洋洋个人博客

四、实际使用

除了用html标签加载CSS文件,还可以在现有CSS文件中加载。7yi思考者日记网-束洋洋个人博客

@import url("tinyScreen.css") screen and (max-device-width: 400px);

这是一个我已经做好的demo。可以点开先睹为快7yi思考者日记网-束洋洋个人博客

7yi思考者日记网-束洋洋个人博客

当屏幕是1024px像素以上时的效果,就是我们平时做的样式效果。7yi思考者日记网-束洋洋个人博客

7yi思考者日记网-束洋洋个人博客

@media screen and (max-width: 1024px) {
    .middle-column-home {
        width: 76%;
        margin-right: 0
    }
    .middle-column {
        width: 82%
    }
    .codelist a.item-top h3 {
        font-size: 14px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .codelist a.item-top {
        width: 40%
    }
}

当屏幕是1024px像素以下时的效果,发现整体页面为了适应屏幕,自动采用了另一个样式。上面代码可看出,宽度位置等已应用上7yi思考者日记网-束洋洋个人博客

7yi思考者日记网-束洋洋个人博客

当屏幕是768px像素以下时的效果,左边的菜单已经自动隐藏了。7yi思考者日记网-束洋洋个人博客

7yi思考者日记网-束洋洋个人博客

@media screen and (max-width:480px) {
    .codelist-desktop {
        display: none
    }
    .codelist-mobile {
        display: block
    }
    #left-menu {
        display: none
    }
    .right-column {
        display: none
    }
    .tab {
        margin: 0 auto
    }
    .middle-column-home {
        width: 100%!important
    }
    .codelist a.item-top .codeicon {
        display: none
    }
    .codelist a.item-top strong {
        display: none
    }
    .codelist a.item-top {
        width: 28%;
        height: 40px;
        color: #bbb;
        background-color: #f6f6f6;
        border-radius: 5px;
        padding: 0
    }
    .codelist a.item-top h3 {
        font-size: 14px;
        text-align: center
    }
}

我们继续缩小屏幕宽度为480px像素以下时的效果,主体内容已经变得更加简洁的一种样式了。这里我们事先在页面又写了一个div,当达到这个宽度时,则隐藏图文的样式,显示纯字体的块样式。7yi思考者日记网-束洋洋个人博客

以上就是@media查询展现的威力,这只是一种方法,当然你也可以使用js来实现。7yi思考者日记网-束洋洋个人博客

本篇demo附件下载赶快自己动手试试吧。7yi思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  •  感谢主机屋提供网站空间;
  •  感谢万网阿里云提供域名解析;
  •  感谢EmpireCMS提供CMS系统;
  •  感谢bootstrap展示本站前端页面;
  •  感谢Glyphicons Halflings提供字体;
  •  感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈

 

网友评论
我也来说两句