Css3响应式布局
1.响应式布局的含义
在不同的情况下对页面进行合理的布局
(视窗口的宽度与高度 不同电脑的分辨率 不同设备平板电脑与手机等。。)
2多媒体查询
语法: @media not|only mediatype and (expressions) {
CSS 代码...;}
CSS 代码...;}
CSS3 多媒体类型
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕,平板,智能手机等。
speech 用于屏幕阅读器
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕,平板,智能手机等。
speech 用于屏幕阅读器
一般主要screen用的比较多
3响应式布局
下面两个盒子(box box1)随着网页窗口的放大与放小而改变大小颜色,这就是响应布局。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: orangered;
}
.box1{
width: 500px;
height: 500px;
background-color: #2f13ff;
}
@media screen and (max-width: 500px) and (min-width: 400px){
.box{
width: 200px;
height: 200px;
background-color: #fff318;
}
.box1{
width: 200px;
height: 200px;
background-color: #f927d5;
}
}
@media screen and (max-width: 400px){
.box{
width: 100px;
height: 100px;
border:1px solid #000000;
background-color: transparent;
}
.box1{
width: 100px;
height: 100px;
border:1px solid #ffa558;
background-color: transparent;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
4弹性盒子(flexbox)
组成:弹性容器(Flex container)和弹性子元素(Flex item)
弹性容器:
display:flex|inline-flex;
内部包含一个或多个弹性子元素
注意:设置为弹性容器后,子元素的float/clear/vertical-align属性将失效
display:flex|inline-flex;
内部包含一个或多个弹性子元素
注意:设置为弹性容器后,子元素的float/clear/vertical-align属性将失效