一、媒体查询:@media
1. 概念: 为不同尺寸的屏幕设定不同的CSS样式
常用参数:
属性名称 | 作用 |
---|---|
width,height | 浏览器的可视宽度 |
device-width | 设备屏幕的宽度 |
device-height | 设备屏幕的高度 |
2.示例:
<style>
#div0{
width: 150px;
height: 200px;
}
/*设备在100px到300px之间是红色*/
@media screen and (min-device-width:100px) (max-device-width:300px) {
#div0{
background-color: red;
}
}
/*浏览器可视宽度在500px到700px之间是红色*/
@media screen and (min-width:500px) and (max-width:700px) {
#div0{
background-color: red;
}
}
/*浏览器可视宽度在700px以上是蓝色*/
@media screen and (min-width:701px) {
#div0{
background-color: blue;
}
}
</style>
<style>
#div0 {
width: 100%;
height: 500px;
}
#div0 div {
float: left;
height: 100px;
}
/* 一行显示三个 */
@media screen and (min-device-width:400px) and (max-device-width:500px) {
#div0 div {
width: 33.3%
}
#div0 div:nth-child(1) {
background-color: red;
}
#div0 div:nth-child(2) {
background-color: blue;
}
#div0 div:nth-child(3) {
background-color: green;
}
}
/* 一行显示两个 */
@media screen and (min-device-width:300px) and (max-device-width:399px) {
#div0 div {
width: 50%;
}
#div0 div:nth-child(1) {
background-color: red;
}
#div0 div:nth-child(2) {
background-color: blue;
}
#div0 div:nth-child(3) {
background-color: green;
}
}
/* 一行显示一个 */
@media screen and (min-device-width:200px) and (max-device-width:299px) {
#div0 div {
width: 100%;
}
#div0 div:nth-child(1) {
background-color: red;
}
#div0 div:nth-child(2) {
background-color: blue;
}
#div0 div:nth-child(3) {
background-color: green;
}
}
</style>
3.媒体查询其它引入方式
(1)style标签 写在style标签中,有条件的执行某个内部样式表
示例:
<style media="(min-device-width:100px) and (max-device-width:300px)">
#div0{
background-color:red;
}
</style>
(2)link引入 写在link标签中,有条件的引入外部样式表
示例:
<link href="css/test.css" rel="stylesheet">
<link href="css/css-1.css" rel="stylesheet"
media="(min-device-width:100px) and (max-device-width:300px)">
二、flex弹性布局
1. 概念:弹性布局,配合rem处理尺寸的适配问题
2. flex-主轴方向与换行
(1)flex-direction 子元素在父元素盒子中的排列
属性值 | 作用 |
---|---|
row | 默认值,从左到右顺序显示 |
row-reverse | 与row相同,但是以相反的顺序 |
column | 项目垂直显示,从上到下 |
column-reverse | 与column相同,但是以相反的顺序 |
示例:
#div0{
display:flex;
flex-direction:row;
}
(2) flex-wrap 子元素在父元素盒子中是否换行(列)
属性值 | 作用 |
---|---|
nowrap | 默认值。不换行不换列 |
wrap | 换行或换列 |
wrap-reverse | 换行或换列,但以相反的顺序 |
(3) flex-flow flex-direction和flex-wrap属性的简写
语法:flex-flow: ||
-
flex-剩余空间调整为间距
(1)justify-content 用来存在剩余空间时,设置为间距的方式
属性值 作用 flex-start 默认值。从左到右,挨着行的开头 flex-end 从左到右,挨着行的结尾 center 居中显示 space-between 平均分布在该行上,两边不留间隔空间 space-around 平均分布在该行上,两边留有一半的间隔空间 - flex-交叉轴的对齐方式
(1) align-items 设置每个flex元素在交叉轴上的默认对齐方式
属性值 作用 flex-start 位于容器开头 flex-end 位于容器结尾 center 居中显示 (2) align-content 与align-items作用相同,但是区别在于align-content是整体向上或者向下或整体居中
属性值 作用 flex-start 位于容器开头 flex-end 位于容器结尾 center 位于容器中心 space-between 之间留有空白 space-around 两端都留有空白 - flex-给子元素设置伸缩比例flex属性
其它属性:
属性值 作用 flex-basis 设置弹性盒伸缩基准值,设置这个width就不生效了 flex-grow 设置弹性盒子的扩展比率,这个表示所占的份数(前提:有剩余空间) flex-shrink 设置弹性盒子的缩小比率,0为不允许缩小 flex flex-grow,flex-shrink,flex-basis的缩写