响应式布局

最新推荐文章于 2023-09-26 22:47:59 发布

什么石头

最新推荐文章于 2023-09-26 22:47:59 发布

阅读量251

点赞数

分类专栏： web前端学习 CSS 文章标签：响应式布局

web前端学习同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

响应式布局的实现

媒介查询

设备高度： device-width, device-height
渲染窗口的宽高： width, height
设备的手持方向： orientation
设备的分辨率： resolution


使用方法：
用外联或者内嵌样式
或者两者同时搭配使用。

设备高度： device-width, device-height

表示设备物理实际的宽高

渲染窗口的宽高： width, height

???????

媒介查询使用方式

外联：让外联样式有效的相应规则条件

<link href="style.css"  type="text/css" rel="stylesheet" 
media="onle screen and (max-width:640px)"
 />
其中的media="onle screen and (max-width:640px)"就是限制条件，当满足当前屏幕的最大尺寸不大于640px时会使用style.css样式中的规则

内嵌：满足相应条件后有效

语法规则：
<style>
    @media screen and (min-width:640px){
        body{
            backgound-color: coral;
        }
    }

</style>

响应式布局实例

html ：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <meta name="viewport" content="width = decice=width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <div class="heading"></div>
    <div class="container clearfix">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
    <div class="footing"></div>
</body>
</html>

css代码：
*{margin: 0; padding: 0;}

.heading,
.container,
.footing{
    margin: 10px auto;
}

.heading{
    height: 100px;
    background-color: red;
}

.left,
.right,
.main{

}

.footing{
    height: 100px;
    background-color: blue;
}
.clearfix:after{
        content:".";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }

/*尺寸在960px以上使用的规则*/
@media screen and (min-width: 960px){

    .heading,
    .container,
    .footing{
        width: 960px
    }

    .left,
    .main,
    .right{
        float: left;
        height: 500px;
        background-color: rgba(244,3,0, .5);
    }

    .right,
    .left{
        width: 200px;
    }
    .main{  
        /*width: 550px;*/
        margin: 0px 5px;
        width: calc(100% - 410px);
    }
    .container{
        width: 960px;
    }

    .footing{
            clear: both;
    }
}
/*尺寸在960以下使用的规则*/
@media screen and (max-width: 960px){
    .heading,
    .container,
    .footing {
        width: 600px;
    }
    .left,
    .main {
        float: left;
        height: 400px;
        background-color: rgba(0,34,53,.5);
    }
    .right {
        display: none;
    }
    .left {
        width: 160px;
    }
    .main {
        width: calc(100% - 165px);
        margin: 0px 0px 0px 5px;
    }
}
/*尺寸小于600px时使用的规则*/
@media screen and (max-width: 600px){

    .heading,
    .container,
    .footing{
        width: 400px;
    }
    .left,
    .right {
        width: 100px;
        height: 100px;
    }
    .main{
        margin-top: 10px;
        width: 100px;
        height: 200px;
    }
    .right{
        margin-top: 10px;
    }
    .container{
        height: 420px;
    }
}

什么石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

响应式布局的实现媒介查询设备高度： device-width, device-height渲染窗口的宽高： width, height设备的手持方向： orientation设备的分辨率： resolution使用方法：用外联或者内嵌样式或者两者同时搭配使用。设备高度： device-width, device-height表示设备物理实际的宽高渲染窗口的宽高： width, heigh
复制链接

扫一扫