一.媒體查詢
?/* 視口寬度大于等于768px 小于等于991px， 網(wǎng)頁背景色是天藍(lán)色 #6cf */
? ? ? @media (min-width:768px) {
? ? ? ? body {
? ? ? ? ? background-color: skyblue;
? ? ? ? }
? ? ? }
? ? ? /* 視口寬度大于等于992px 小于等于1199px， 網(wǎng)頁背景色是綠色 #0a0 */
? ? ? @media (min-width:992px) {
? ? ? ? body {
? ? ? ? ? background-color: #0a0;
? ? ? ? }
? ? ? }
? ? ? /* 視口寬度大于等于1200px， 網(wǎng)頁背景色是橙色 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.柵格系統(tǒng)
? <!--
? ? ? 需求:
? ? ? ? 大屏 lg 和中屏 md: 一行排列4個(gè)內(nèi)容;
? ? ? ? 小屏 sm：一行排列2個(gè)內(nèi)容；
? ? ? ? 超小屏 xs：一行排列1個(gè)內(nèi)容
? ? ?-->
? ? <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>
