媒体查询的目的:了解如何使用媒体查询做响应式页面。
媒体查询会写如下代码即可:
body {
background-color: gray;
}
/* 大于等于768px 为粉色 */
@media (min-width: 768px) {
body {
background-color: pink;
}
}
/* 大于等于992px 为蓝色 */
@media (min-width: 992px) {
body {
background-color: skyblue;
}
}
/* 大于等于992px 为绿色 */
@media (min-width: 1200px) {
body {
background-color: green;
}
}
媒体查询使用场景1
约束移动端不要超过规定大小
body {
max-width: 540px;
margin: 0 auto;
}
/* 大于等于540px 则不允许 html文字大小再改动,强制定为 54px*/
@media (min-width: 540px) {
html {
font-size: 54px !important;
}
}
媒体查询使用场景2
元素的显示和隐藏
@media (max-width: 800px) {
.box div:nth-child(2) {
display: none;
}
.box div:last-child {
width: 350px;
}
}
媒体查询使用场景3
响应式原理:通过@media媒体标签判断屏幕大小, 让盒子在不同宽度呈现不同的摆放顺序
<style>
.box {
width: 1000px;
height: 150px;
/* background-color: pink; */
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.box div {
width: 25%;
background-color: skyblue;
height: 150px;
margin-bottom: 20px;
}
.box div:nth-child(even) {
background-color: pink;
}
@media (max-width: 992px) {
.box {
width: 768px;
}
.box div {
width: 50%;
}
}
@media (max-width: 768px) {
.box {
width: 100%;
}
.box div {
width: 100%;
}
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Bootstrap
-
并且引入到html文件中
<link rel="stylesheet" href="./css/bootstrap.min.css">
栅格系统
栅格系统(gridsystems),也叫“网格系统,它就是通过一系列的行(row)与列(column)的组合创建页面布局。
简单说,栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。
BootStrap3默认将网页分成12等份
比如,超大屏幕下我们想要一个通栏的大盒子
<div class="container">
<div class="col-lg-12">我自己独占一行</div>
</div>
超大屏下,如果一行放4个,怎么做呢?
<div class="container">
<div class="col-lg-3">我占左边3个</div>
<div class="col-lg-3">我站右边3个</div>
<div class="col-lg-3">我站右边3个</div>
<div class="col-lg-3">我站右边3个</div>
</div>
如果实现不同屏幕下,不同的显示个数,可以通过使用不同类名。
还是这4个盒子,如果在中等屏幕下放3个怎么做呢?
<div class="container">
<div class="col-lg-3 col-md-4">盒子内容</div>
<div class="col-lg-3 col-md-4">盒子内容</div>
<div class="col-lg-3 col-md-4">盒子内容</div>
<div class="col-lg-3 col-md-4">盒子内容</div>
</div>