首页 > web前端 > css教程 > 关于css响应式的实现代码及效果

关于css响应式的实现代码及效果

不言
发布: 2018-07-24 10:51:23
原创
1782 人浏览过

这篇文章分享给大家的内容是关于css响应式的实现代码及效果,内容很有参考价值,希望可以帮到有需要的小伙伴。

1.CSS 来实现响应式

CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下:

  • @media 类型 and (条件1) and (条件二){css样式}

我们只需用到width衍生出的max-width这个属性,定义输出设备中的页面可见区域宽度来控制该改变的样式即可。
html代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>响应式</title>

    <link rel="stylesheet" type="text/css" href="demo01.css" media="screen and (min-width:1024px)"/>
    <link rel="stylesheet" type="text/css" href="demo03.css" media="screen and (max-width:1024px) and (min-width:450px)"/>
    <link rel="stylesheet" type="text/css" href="demo02.css" media="screen and (max-width:450px)"/>
</head>
<body>
    <p class="header">
        头部
    </p>
    <p class="container clearfix">
        <p class="left">左部</p>
        <p class="center">中部</p>
        <p class="right">右部</p>
    </p>
    <p class="footer">底部</p>
</body>
</html>
登录后复制

demo01.css样式如下:

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:20%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:55%;
    background-color:gray;
    float:left;
    height:300px;
    margin:0 2.5%;
}
.right{
    width:20%;
    background-color:yellow;
    float:left;
    height:300px;
}
登录后复制

demo02的样式如下:

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:30%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:70%;
    background-color:gray;
    float:left;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}
登录后复制

demo03的样式:

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:100%;
    background-color:orange;
    height:300px;
}
.center{
    width:100%;
    background-color:gray;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}
登录后复制

效果图:

4120867230-5b557db517b87_articlex.png

窗口大于1024px时显示的样子

3062128420-5b557de593f19_articlex.png

当大于640小于980时,右侧栏在底部

823942720-5b557e750df63_articlex.gif

当小于480时,导航栏折叠,body三部分竖直排列显示,若窗口持续缩小,不在发生变化,区域被压缩

相关推荐:

CSS实现响应式布局的方法

css实现响应下拉式菜单的代码

以上是关于css响应式的实现代码及效果的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板