一.媒体查询
/* 视口宽度大于等于768px 小于等于991px， 网页背景色是天蓝色 #6cf */
@media (min-width:768px) {
body {
background-color: skyblue;
}
}
/* 视口宽度大于等于992px 小于等于1199px， 网页背景色是绿色 #0a0 */
@media (min-width:992px) {
body {
background-color: #0a0;
}
}
/* 视口宽度大于等于1200px， 网页背景色是橙色 orange */
@media (min-width: 1200px){
body {
background-color: orange;
}
}
二.bootstrap基本使用
1.<!-- 1.引入bootstrap的css文件 -->
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />
2.栅格系统
<!--
需求:
大屏 lg 和中屏 md: 一行排列4个内容;
小屏 sm：一行排列2个内容；
超小屏 xs：一行排列1个内容
-->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">4</div>
3.js效果引入
<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
