Ⅰ. 响应式布局

一套代码，可在pc端运行，也可在移动端运行，并体验都不错

一.实现原理

根据屏幕宽度不同 去使用不同的css

(1) 媒体查询

① 写法

1. 简洁写法

@media (width:400px){
  body{
    background-color: blue;
  }
}

2. 常见写法（推荐）

@media screen and (width:400px) {
  body{
    background-color: yellow;
  }
}

② 应用：区间选择

1. 小于：max-width

@media screen and (max-width: 100px) {
  body {
    background-color: red;
  }

2. 大于：min-width

@media screen and (min-width: 500px) {
  body {
    background-color: green;
  }

3. 范围

@media screen and (min-width: 300px) and (max-width: 500px) {
  body {
    background-color: yellow;
  }
}

二.bootstrap-框架应用体验

基于 HTML、CSS、JAVASCRIPT 的用于快速开发 Web 应用程序和网站的前端响应式框架

(1) 优缺点

① 优点

• 为开发人员创建借口提供一个简介统一的解决方案
• 包含了功能强大的内置组件，易于定制
• 提供基于Web的定制
• 开源

② 缺点

• 面对复杂界面，需大量重写代码，不便于维护
• CSS内容多，容易造成宽带浪费

(2) 核心知识：栅格系统

① 系统划分的四种屏幕宽度

1. 大屏幕：lg（large） >1200px
2. 中等屏幕：md（middle）992px-1200px
3. 小屏幕：sm（small）768px-992px
4. 极小屏幕：xs（extra small）<768px

② 系统固定用法

1. 外出写 'container' 类名（*container-fluid [全屏] ，按需选择）

2. 里面写 'row' 类名

3. 根据需求写每行显示几个元素（*默认一行划分12份）

代码示范

<div class="container">
  <div class="row">
    <!-- 在大屏幕下 每一列 占2份 -->
    <div class="col-lg-2">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-2">3</div>
    <div class="col-lg-2">4</div>
    <div class="col-lg-2">5</div>
    <div class="col-lg-2">6</div>
  </div>
</div>

③ 系统特性

1. 如果一行超过了12份，和浮动的特性一样，往下掉
2. .container 居中的版心宽度会跟随屏幕宽度的变化而变化

(3) 应用步骤

① 获取资源

1. 进入官网下载页面：v3.bootcss.com/getting-sta…
2. 下载资源!

② 引入步骤

1. 引入bootstrap css文件

<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">

2. 引入jquery.js

<script src="./lib/jquery.js"></script>

3. 引入bootstrap.js

<script src="./lib/bootstrap/js/bootstrap.js"></script>

4. 根据需求寻找相应模块并按需修改

• 示例：导航条

  ➊

➋