首页>>图形网页>>Media响应式布局标签及样式使用详解
Media响应式布局标签及样式使用详解
来源: 时间: 2015-04-02 21:49:46

来运用到响应式布局的设计项目中去。设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子:

/* 当浏览器的可视区域小于980px */

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

     #wrap {width: 90%; margin:0 auto;}

     #content {width: 60%;padding: 5%;}

     #sidebar {width: 30%;}

     #footer {padding: 8% 5%;margin-bottom: 10px;}

}

 /* 当浏览器的可视区域小于650px */

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

     #header {height: auto;}

     #searchform {position: absolute;top: 5px;right: 0;}

     #content {width: auto; float: none; margin: 20px 0;}

     #sidebar {width: 100%; float: none; margin: 0;}

 }

通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果,我们往往还要格式化一些CSS属性的初始值:

/* 禁用iPhone中Safari的字号自动调整 */

html {

-webkit-text-size-adjust: none;

}

/* 设置HTML5元素为块 */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

}

/* 设置图片视频等自适应调整 */

img {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

最后要注意的是在页面的头部<head></head>之间加上下面这句∶

<meta name="viewport" content="width=device-width; initial-scale=1.0">

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

要点总结

Media Query JavaScript

对于那些尚不支持media query的浏览器,我们要在页面中调用css3-mediaqueries.js

<!--[if lt IE 9]>

    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

CSS Media Queries

实现自适应页面设计的关键之一,就是使用CSS根据分辨率宽度的变化来调整页面布局结构。

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

    #content {

        width: auto;

        float: none;

    }

    #sidebar {

        width: 100%;

        float: none;

    }

}

弹性图片

通过max-width:100%和height:auto实现图片的弹性化。

img {

    max-width: 100%;

    height: auto;

    width: auto\9; /* ie8 */

}

弹性内嵌元素(视频)

通过width:100%和height:auto实现内嵌元素的弹性化。

.video embed,

.video object,

.video iframe {

    width: 100%;

    height: auto;

}

字号自动调整的问题

通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整

html {

    -webkit-text-size-adjust: none;

}

页面宽度缩放的问题

<meta name="viewport" content="width=device-width; initial-scale=1.0">

本页地址:http://www.easytd.com/tuxingwangye/d_15040221353.html

上一篇:JavaScript实现网页右下角弹出窗口代码 下一篇:bootstrap的流式布局的使用