码迷,mamicode.com
首页 > Web开发 > 详细

div css 自适应

时间:2017-01-01 08:45:23      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:ini   href   css3   特性   屏幕   问题   head   bar   float   

 

怎样实现响应式布局?

对于这个问题,我们可以通过CSS3中的Media Query来实现,即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于"。如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。

首先我们要允许网页宽度自动调整

在网页代码的头部,加入一行viewport元标签:

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

 下面通过Media Query我们可以得到不同设备屏幕的宽和高,从而我们就可以分别处理了。根据不同的设备屏幕宽度,设置不同的CSS。那么这里有两种方法:

1、外联样式表

在这里我们可以根据不同的设备载入不同的CSS样式表 

<linkrel="stylesheet"type="text/css"media="screen and (min-width:960px)"href="css/gt-960px.css">

  当页面宽度大于等于960px时,载入样式表gt-960px.css 

<linkrel="stylesheet"type="text/css"media="screen and (min-width:600px) and (max-width:960px)"href="css/gt-600px-lt-960px.css">

当页面宽度大于等于600px且小于等于960px时,载入样式表gt-600px-lt-960px.css 

<linkrel="stylesheet"type="text/css"media="screen and (max-width:600px)"href="css/lt-600px.css">

当页面宽度小于等于600px时,载入样式表lt-600px.css

2、样式表中内嵌法

当页面宽度大于等于960px时

@media screenand (min-width:960px){

    .header,

    .container,

    .footer{

        width:960px;

    }

             

    .sidebarLeft,

    .main,

    .sidebarRight{

        float:left;

        height:400px;

    }

    ...

}

当页面宽度大于等于600px且小于等于960px时

@media screenand (min-width:600px) and (max-width:960px){

    .header,

    .container,

    .footer{

        width:600px;

    }

              

    .sidebarLeft,

    .main{

        float:left;

        height:400px;

    }

    ...

}

当页面宽度小于等于600px时

 

@media screenand (max-width:600px){

    .header,

    .container,

    .footer{

        width:400px;

    }

             

    .sidebarLeft,

    .sidebarRight{

        width:400px;

        height:100px;

    }

    ...

}

弹性图片

我们需要为图片设置max-width: 100%和height: auto,来实现其弹性化。

img {

    max-width: 100%;

    height: auto;

    width: auto9; /* ie8 */

}

 

div css 自适应

标签:ini   href   css3   特性   屏幕   问题   head   bar   float   

原文地址:http://www.cnblogs.com/laopo/p/6240694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!