响应式布局

最新推荐文章于 2017-08-10 08:26:58 发布

qq_34664510

最新推荐文章于 2017-08-10 08:26:58 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/qq_34664510/article/details/73799909

版权

css3 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

html5

17 篇文章 0 订阅

订阅专栏

响应式布局

3 篇文章 0 订阅

订阅专栏

1.灵活的图像和媒体。尺寸按百分比定义，根据环境进行缩放
2.灵活的、基于网格的布局。
3.媒体查询。根据媒体特征，对设计进行调整

创建可伸缩图像

1.图像缩放刻意空间：其父元素建立的内容区域
2.width:100%会让图像尽可能填充容器，容器宽度比图像宽，会拉伸
3.图标字体、svg可创建无损缩放的图性
4.也可以用于video、embed、object

max-width:100%;

这里写图片描述

创建弹性布局

对元素设置基于百分数的margin和padding、字体，常用em

.page{max-width:60em;}  //默认字体为14px

//原来
.page{width:960px;}
main{width:600px;}
.sidebar{width:300px;}

//优化后
.page{max-width:960px;}
main{width:62.5%;}
.sidebar{width:31.25%;}

这里写图片描述

媒体查询

media query

device-width,device-height——屏幕宽高（物理）
width,height——渲染窗口宽高（实际）
orentation——设备方向
resolution——设备分辨率

外联和内联的两种用法：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)">//外联样式
    <style>//内联样式
    @media screen and (min-width:480px){
        body{background:blue;}
    </style>
</head>
</html>

视觉区域的宽度为设备宽度：在纵向模式下该宽度的页面内容会填充整个屏幕。包含这一句，媒体查询才会显示预期效果

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

这里写图片描述

兼容旧版IE

respond.min.js

这里写图片描述

实例

<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header"></div>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

*{
    margin:0;   
    padding:0;
}
.header,
.container,
.footer{
    margin:10px auto;
}
.header{
    height:100px;
    background:yellow;
}
.left,
.right,
.main{
    background:blue;
}
.footer{
    height:100px;
    background:black;
}

@media screen and (min-width: 960px){
    .header,
    .container,
    .footer{
        width:960px;
    }

    .left,
    .right,
    .main{
        float:left;
        height:500px;
    }
    .left,
    .right{
        width:200px;
    }
    .main{
        margin-left:5px;
        margin-right:5px;
        width:550px;        
    }
    .container{
        height:500px;
    }   
}


@media screen and (min-width: 600px) and (max-width: 960px){
    .header,
    .container,
    .footer{
        width:600px;
    }
    .right,
    .main{
        float:left;
        height:400px;
    }
    .left{
        display:none;
    }
    .right{
        width:160px;
    }
    .main{
        margin-left:5px;
        width:435px;        
    }
    .container{
        height:400px;
    }

}

@media screen and (max-width: 600px){
    .header,
    .container,
    .footer{
        width:400px;
    }
    .left,
    .right{
        width:400px;
    }
    .main{
        margin-top:10px;
        width:400px;
        height:200px;
    }
    .right{
        margin-top:10px;
    }
    .container{
        height:420px;
    }

}