移动web

<meta name = "viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

<!-- 
    解释：
		meta：提供有关页面的元信息（meta-information）
		viewport：视口
    width = device-width ： 设置浏览器视口宽度为设备宽度（即理想视口）
    initial-scale=1 ： 设置初始的缩放比例
    maximum-scale = 1.0 ：允许用户缩放的最大比例
    minimum-scale = 1.0 ：允许用户缩放的最小比例
    user-scalable = no/0 ：是否允许用户缩放页面
-->
<!-- 
    补充：一般要禁用缩放，目的是让web应用看起来更像是移动应用，而且也能避免一些因缩放导致的bug
		vscode设置：/Resources/app/extensions/emmet/node_modules/vscode-emmet-helper/lib/cjs/expand/expand-full.js
-->

流式布局

百分比单位

px：绝对单位写多少像素就是多少像素
% ：百分比单位 width和height都是基于包含它的块级元素的百分比，比如父元素div宽度为100px，设置子元素width: 50%，则子元素的宽度为50px

应用（重点）

项目实战

实战前准备

样式初始化

    * {
      box-sizing: border-box;
    }
    body {
      font-size: 12px;
    }
    /* 把我们所有这些标签的内外边距清零 */
    html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
      margin: 0;
      padding: 0;
    }
    /* em 和 i 斜体的文字不倾斜 */
    em,
    i {
        font-style: normal
    }
    /* 去掉li 的小圆点 */
    li {
        list-style: none
    }

    img {
        /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
        border: 0;
        /* 取消图片底侧有空白缝隙的问题 */
        vertical-align: middle
    }

    a {
        text-decoration: none
    }

    input, button {
      /* 去掉边框 */
      border: 0;
      /* 轮廓线 */
      outline: none;
    }
    .clearfix::after{
      content: '';
      display: block;
      clear: both;
      visibility: hidden;
      height: 0;
    }

主流方案：normalize.css

官网：Normalize.css: Make browsers render all elements more consistently.

盒子模型

/*标准盒模型*/
box-sizing: content-box;
/*C3盒模型*/
box-sizing: border-box;

布局思路

由大到小由外向内

注意事项

UI图是以Iphone6/7/8为标准设计的，它的宽度为750px，当我们写css像素时需要除以2
实际完成效果是不是和UI图保持一致（还原95%以上）
由于UI图是以Iphone6/7/8为标准设计的，所以我们要优先去适配Iphone6/7/8，iphone6/7/8 在保证这个没问题的情况下，再适配其它设备

圣杯布局（重点）

实现双飞翼的代码:

  <style>
    * {
      box-sizing: border-box;
    }
    body {
      font-size: 12px;
    }
    /* 把我们所有这些标签的内外边距清零 */
    html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
      margin: 0;
      padding: 0;
    }
    /* em 和 i 斜体的文字不倾斜 */
    em,
    i {
        font-style: normal
    }
    /* 去掉li 的小圆点 */
    li {
        list-style: none
    }

    img {
        /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
        border: 0;
        /* 取消图片底侧有空白缝隙的问题 */
        vertical-align: middle
    }

    a {
        text-decoration: none
    }

    input, button {
      /* 去掉边框 */
      border: 0;
      /* 轮廓线 */
      outline: none;
    }
    .clearfix::after{
      content: '';
      display: block;
      clear: both;
      visibility: hidden;
      height: 0;
    }
    header {
      width: 100%;
      height: 100px;
    }
    .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <header>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </header>
</body>

实现中间盒子能空出两边双飞翼的两种方法有：

理解知识:

给一个盒子加左右padding或margin还不会撑破父盒子的两种方法（重点）

padding或margin + 不设置width

原理：块级元素默认在宽度上始终刚好占满整个父盒子，即使加了左右padding或margin，也不会撑破父盒子。
padding + C3盒模型

一旦给一个盒子设置了width，就只能使用这种方式

方式一: width + padding+c3盒模型

    /* 方案一 */
    .middle {
      width: 100%;
      height: 100px;
      padding: 0 100px;
      box-sizing: border-box;
      background-color: royalblue;
    }

方案二: 左右padding或margin把左右两边空出来

    /* 方案二 */
    .middle {
      height: 100px;
      /* margin: 0 100px; */
      padding: 0 100px;  /* padding是占用盒子的背景颜色的 */
      background-color: royalblue;
    }

圣杯布局方案总结

圣杯布局-margin

        .box {
            position: relative;
            margin-top: 100px;
            height: 50px;
            border: 1px solid black;
        }
        .left, .right {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
        .left {
            left: 0;
            top: 0;
        }
        .right {
            right: 0;
            top: 0;
        }
        .middle {
            height: 50px;
            margin: 0 50px;
            background-color: blue;
        }

    <div class="box">
        <div class="left"></div>
        <div class="middle">askdfj</div>
        <div class="right"></div>
    </div>

圣杯布局-padding

        .box {
            position: relative;
            margin-top: 100px;
            height: 50px;
            border: 1px solid black;
        }
        .left, .right {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
        .left {
            left: 0;
            top: 0;
        }
        .right {
            right: 0;
            top: 0;
        }
        .middle {
            height: 50px;
            padding: 0 50px;
        }
        .grandson {
            width: 100%;
            height: 100%;
            background-color: blue;
        }

    <div class="box">
        <div class="left"></div>
        <div class="middle">
            <div class="grandson">askdfj</div>
        </div>
        <div class="right"></div>
    </div>

圣杯布局-flex

        .box {
            width: 50%;
            height: 50px;
            border: 1px solid black;
            margin: 100px auto;
            display: flex;
        }
        .box div {
            height: 50px;
        }
        .left, .right {
            flex: none;
            width: 50px;
            background-color: pink;
        }
        .middle {
            flex: auto;
            background-color: blue;
        }

    <div class="box">
        <div class="left"></div>
        <div class="middle">asdfjkl</div>
        <div class="right"></div>
    </div>

圣杯布局-中间元素使用绝对定位

        .box {
            position: relative;
            width: 50%;
            height: 50px;
            border: 1px solid black;
            margin: 100px auto;
        }
        .box div {
            height: 50px;
        }
        .left, .right {
            width: 50px;
            background-color: pink;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .middle {
            position: absolute;
            top: 0;
            left: 50px;
            right: 50px;
            background-color: blue;
        }

        <!-- 
        原理:
        如果我们给middle设置了左右,没有给width,那么浏览器自动会把自己的宽度减去middle左右的值,然后剩下的就是middle的宽度
        如果左右宽度的给的话,三个加起来超出父盒子的话,那么右边的会不生效,上下高同理,三个加起来超出父盒子的话,那么下边的会不生效
     -->
    <div class="box">
        <div class="left"></div>
        <div class="middle">asdfjkl</div>
        <div class="right"></div>
    </div>

flex布局

rem布局

em与rem的区别

em：自己的font-size值

<div class="father">
  <div class="child"></div>
</div>

.father {
  font-size: 20px;
}
.child {
  font-size: 20px;
  width: 2em;
  height: 2em;
  background-color: pink;
}

rem：html元素的font-size值

html {
  font-size: 100px;
}
.child {
  font-size: 30px;
  width: 2rem;
  height: 2rem;
  background-color: pink;
}

之前做的页面还有什么问题？

文字的大小也要自适应
流式布局和flex布局解决的是宽度自适应，而高度很难解决。
rem来解决高和文字大小的问题

如何实现？靠媒体查询

@media mediatype and|not|only (media feature){
    css-code;
}
screen屏幕的意思

各单词解释

用@media开头，注意@符号
mediatype媒体类型
- all 用于所有设备
- print 用于打印机
- screen 用于电脑屏幕，平板电脑，智能手机屏幕
关键字and not only
- and表示且的意思，满足多个条件
- not表示排除掉某个，比如not print表示不包括打印机
- only表示仅某一个设备
media feature 媒体特性必须有小括号包含
- 设备宽度width/max-width/min-width
- 设备高度height
- 设备方向: portrait (竖屏模式) | landscape (横屏模式)

示例：

.box {
  width: 100%;
  background-color: pink;
}
@media screen and (width: 400px) {
  .box {
    height: 40px;
  }
}
@media screen and (width: 500px) {
  .box {
    height: 50px;
  }
}

元素宽高的自适应为什么必须要等比例？

示例：

.box {
  width: 100%;
  background-color: pink;
}
@media screen and (width: 400px) {
  .box {
    height: 40px;
  }
}
@media screen and (width: 500px) {
  .box {
    height: 100px;
  }
}

原因：如果不等比例样式就会乱掉

只使用媒体查询有什么不好？

示例：

<header></header>
<footer></footer>

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: pink;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: pink;
}
@media screen and (width: 400px) {
  header {
    height: 20px;
  }
  footer {
    height: 40px;
  }
}
@media screen and (width: 500px) {
  header {
    height: 25px;
  }
  footer {
    height: 22.5px；
  }
}

坏处：代码重复性太高

rem与媒体查询结合使用

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background-color: pink;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: pink;
}
@media screen and (width: 400px) {
  html {
    font-size: 40px;
  }
}
@media screen and (width: 500px) {
  html {
    font-size: 50px;
  }
}

当浏览器窗口不等于媒体查询中的width怎么办？

在工作中我们一般不使用width，一般使用max-width和min-width。有三种方式：

同时使用min-width和max-width

@media screen and (min-width: 0px) and (max-width: 399px) {
  html {
    font-size: 30px;
  }
}
@media screen and (min-width: 400px) and (max-width: 499px) {
  html {
    font-size: 40px;
  }
}
@media screen and (min-width: 500px) {
  html {
    font-size: 50px;
  }
}

只使用min-width（稍微推荐）

@media screen and (min-width: 0px) {
  html {
    font-size: 30px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 40px;
  }
}
@media screen and (min-width: 500px) {
  html {
    font-size: 50px;
  }
}

几个问题：

如果窗口不等于min-width或max-width时怎么办？就按照上一个font-size进行计算。所以当窗口在一个阶段内进行变化时，页面上的所有使用rem的元素不会发生任何变化

真正工作中会怎么做？

第一步：档位划分

@media screen and (min-width: 0px) {
  html {
    font-size: 85.3333px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 110.4px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 128px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 144px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 170.6666px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 200px;
  }
}

几个问题：

min-width和max-width的值如何确定，即档位应该如何划分？

可以随便写，这里只是列出了业内最常用的屏幕尺寸。档位划分得越细，页面的自适应效果就越细腻。
font-size值如何确定？

分两步：
1. 先确定375px屏幕尺寸的font-size值。
  
  为什么？因为UI图是以iphone6/7/8为标准设计的，尺寸为750px，对应的逻辑分辨率为375px。
  
  那这里为什么要设置为100px？其实可以随便设置，这里设置100px是为了接下来方便计算，比如测得一个图片宽度为24px，我们就可以很快地计算出rem值为0.12rem。
2. 再计算出别的屏幕尺寸的font-size值
  
  拿414px屏幕尺寸举例：用375除以100得到3.75，然后再用414除以3.75。（或者：414/它的font-size = 375/100。其实就是要等比例）

第二步：把UI图测量的尺寸换算成rem单位

根据UI图得出css像素值

eg：测得UI图div元素的宽为375px，因为是2倍图，所以css像素值为187.5px
把px换算成rem

50px

50px/100px = 0.5rem

如果用iphone6打开,html的font-size:100px; 0.5rem * 100px = 50px

如果用xr打开,html的font-size: 110.4px; 0.5rem*110.4=55.2px

50px/110.4px = 0.4528rem

第三步：重置body元素的fontSize值

/* 由于字体会继承，所以需要重置一下body的font-size */
body {
    font-size:12px;
}

最后浏览器是怎么运行的呢？

如何用iphone6/7/8打开

则会执行下面这段代码：

@media screen and (min-width: 375px) {
  html {
    font-size: 100px;
  }
}

这时html的font-size值变为了100px，再去执行下面这段代码：

.box {
  width: 1.875rem;
}

这时浏览器就会这样计算：1.875 x 100 x 2（2倍屏）= 375px，占屏幕宽度的一半
如何用iphoneXR（物理分辨率为828x1792）打开

则会执行下面这段代码：

@media screen and (min-width: 414px) {
  html {
    font-size: 110.4px;
  }
}

这时html的font-size值变为了110.4px;，再去执行下面这段代码：

.box {
  width: 1.875rem;
}

这时浏览器就会这样计算：1.875 x 110.4 x 2（2倍屏）=414px，占屏幕宽度的一半

检查大家是否真的理解了rem与媒体查询结合使用

题目：UI图尺寸为1024px（3倍图），如何进行档位划分？

@media screen and (min-width: 0px) {
  html {
    font-size: 93.75px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 93.75px;
  }
}
@media screen and (min-width: 341.333px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 500px) {
  html {
    font-size: 146.48px;
  }
}

BFC盒子

一: 何为BFC

BFC格式化上下文,是web页面中盒模型布局的css渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器

可以把BFC理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部

二: 形成BFC的条件

1.浮动元素,float除none以外的值

2.绝对定位元素,position(absolute,fixed)

3.display为以下其中之一的值inline-block,table-cell,table-caption,flex

4.overflow除了visible以外的值(hidden,auto,scroll)

5.body根元素

三: BFC的特性

1.内部的box会在垂直方向上一个接一个的放置,(相当于废话,即便不在bfc里块级盒子也会垂直排列)

2.垂直方向上的距离由margin决定(相当于废话,即便不在bfc里块级盒子垂直方向上的距离由margin决定)

3.bfc的区域不会与float的元素区域重叠

例如:

(1) 两端固定中间自适应

(2)防止字体环绕

众所周知,浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被覆盖的,文字反而还会浮动的盒子,这也是一个比较有趣的特性

  <style>
    .father {
      margin: 100px auto;
      width: 200px;
      height: 100px;
      border: 1px solid black;
    }
    .child1 {
      width: 100px;
      height: 50px;
      float: left;
      background-color: blueviolet;
    }
    .child2 {
      /* overflow: hidden; */
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1">1</div>
    <div class="child2">干点活东华动画都不能告诉你发给你跟你说肥牛饭had太皇太后让你如头一回让他很大方水果蛋糕身体好电饭煲好地方不好的事</div>
  </div>
</body>

  <style>
    .father {
      margin: 100px auto;
      width: 200px;
      height: 100px;
      border: 1px solid black;
    }
    .child1 {
      width: 100px;
      height: 50px;
      float: left;
      background-color: blueviolet;
    }
    .child2 {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1">1</div>
    <div class="child2">干点活东华动画都不能告诉你发给你跟你说肥牛饭had太皇太后让你如头一回让他很大方水果蛋糕身体好电饭煲好地方不好的事</div>
  </div>
</body>

圣杯布局BFC

  <style>
    .box {
      width: 100%;
      height: 50px;
      border: 1px solid black;
    }
    .middle {
      height: 100%;
      overflow: hidden;
      background-color: blue;
    }
    .middle p {
        margin: 0;
        width: 30px;
        height: 30px;
        background-color: black;
      }
    .left,.right {
      width: 200px;
      height: 100%;
      background-color: red;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">
      <p></p>
    </div>
  </div>
</body>

bootstrap框架

01-介绍

什么是框架？

bootStrap框架（Twitter发明的）能干嘛？
- 标准化的html+css代码规范
- 它提供了大量的css样式、html组件、各种各样的特效
- 提供了一套响应式布局的解决方案——栅格系统
- 有自己的生态圈，不断更新迭代
  - 2.0 兼容性好，但已停止维护
  - 3.0 目前使用最多，不支持IE7-
  - 4.0 最新版
好处：提高开发效率

02-bootStrap框架自带Normalize.css

03-基础使用

第一步：创建html骨架结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
      <!--比如说你装了IE9，它会自带IE7和IE8，这行代码的作用就是告诉IE,在打开我这个页面时，请使用你的最高版本进行渲染页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
      
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

第二步：下载并修改bootstrap路径

百度搜索"bootStrap"并下载生产版本的css文件，即bootstrap.min.css

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

第三步：使用框架提供的内置组件

<button type="button" class="btn btn-primary">Primary</button>

04-栅格系统的使用步骤

第一步：包裹元素设置

.container 或 .container-fluid

第二步：行元素设置

.row

第三步：列元素设置

bootStrap框架将一行分为12列，每一列设置为8.3333%左右，这样就实现了页面的自适应

04-栅格系统的拓展

列偏移

<div class="col-lg-3 col-lg-offset-1"></div>

列嵌套

  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <div class="row">
          <div class="col-lg-3"></div>
          <div class="col-lg-3"></div>
        </div>
      </div>
    </div>
  </div>

列排序

  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-lg-push-2">1</div>
      <div class="col-lg-2 col-lg-pull-3">2</div>
    </div>
  </div>

05-栅格系统的注意事项

列元素的直接父元素可以是 .container 或 .container-fluid

.row的直接子元素只能是列元素

每个元素都自带padding-left：15px，padding-right：15px，然后里面的元素使用margin-left：-15px和margin-right：-15px给抵消掉

每一个列它既是float: left，还是相对定位。

06-其它小功能

快速浮动

.pull-left {
	float: left;
}
<div class="pull-left">...</div>
<div class="pull-right">...</div>

让内容块居中

<div class="center-block">...</div>

清除浮动

<div class="clearfix">...</div>

显示或隐藏内容

<div class="show">...</div>
<div class="hidden">...</div>
<div class="invisible">...</div>

响应式

响应式布局和自适应的区别？

屏幕自适应随着屏幕的放大而放大,等比例

响应式是一套代码,窗口改变的话布局发生变化.跟着自己设置的值来放大放小

bootStrap框架的响应式

布局容器

1. container类用于固定宽度并支持响应式布局的容器

bootStrap框架的档位划分：

屏幕尺寸	设备称号	媒体查询代码	版心尺寸设置
小于 768px	超小屏幕（手机）	(max-width:767px)	100%
768 ~ 992px	小屏设备（平板）	(min-width:768px) and (max-width:992px)	750px
992 ~ 1200px	中等屏幕（桌面显示器）	(min-width:992px) and (max-width:1200px)	970px
大于 1200px	大桌面显示器	(min-width:1200px)	1170px

理论还原到代码：

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<!-- <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> -->

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
    .container {
        margin: 0 auto;
        height: 100px;
        background-color: aqua;
    }
    /* 小于 768px超小屏幕（手机） */
    @media screen and (max-width: 768px) {
        .container {
            width: 100%;
        }
    }
    /* 768 ~ 992px小屏设备（平板） */
    @media screen and (min-width: 769px) and (max-width: 992px) {
        .container {
            width: 750px;
        }
    }
    /* 992 ~ 1200px中等屏幕（桌面显示器） */
    @media screen and (min-width: 993px) and (max-width: 1200px) {
        .container {
            width: 970px;
        }
    }
    /* 大于 1200px大桌面显示器 */
    @media screen and (min-width: 1201px) {
        .container {
            width: 1170px;
        }
    }
</style>
</head>
<body>
    <div class="container"></div>
</body>

2. container-fluid

理论还原到代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container-fluid {
            width: 100%
        }
    </style>
</head>
<body>
    <div class="container-fluid">

    </div>
</body>
</html>

栅格系统

<div class="container">
  <div class="row">
    <!-- 显示效果：
    1、当屏幕从0到992px时，这个div显示5份
    2、当屏幕大于992px时，这个div显示1份 -->
    <div class="col-xs-5 col-md-1"></div>
  </div>
</div>

栅格系统的原理

理论还原到代码：

/* 所以屏幕 */
@media screen and (min-width: 0px) {
  .col-xs-1 {
    width: 8.333333%
  }
  .col-xs-2 {
    width: 16.66666%
  }
}
/* ≥768px的屏幕 */
@media screen and (min-width: 768px) {
  .col-sm-1 {
    width: 8.333333%
  }
  .col-sm-2 {
    width: 16.66666%
  }
}
/* ≥992px的屏幕 */
@media screen and (min-width: 992px) {
  .col-md-1 {
    width: 8.333333%
  }
  .col-md-2 {
    width: 16.66666%
  }
}
/* ≥1200px的屏幕 */
@media screen and (min-width: 1200px) {
  .col-lg-1 {
    width: 8.333333%
  }
  .col-lg-2 {
    width: 16.66666%
  }
}

隐藏显示

隐藏显示的原理

理论还原到代码：

visible-xx

    .visible-xs, .visible-sm, .visible-md, .visible-lg {
        display: none;
    }

    /* 小于 768px超小屏幕（手机） */
    @media screen and (max-width: 768px) {
        .visible-xs {
            display: block;
        }
    }
    /* 768 ~ 992px小屏设备（平板） */
    @media screen and (min-width: 769px) and (max-width: 992px) {
        .visible-sm {
            display: block;
        }
    }
    /* 992 ~ 1200px中等屏幕（桌面显示器） */
    @media screen and (min-width: 993px) and (max-width: 1200px) {
        .visible-md {
            display: block;
        }
    }
    /* 大于 1200px大桌面显示器 */
    @media screen and (min-width: 1201px) {
        .visible-lg {
            display: block;
        }
    }

hidden-xx

/* 小于 768px超小屏幕（手机） */
@media screen and (max-width: 768px) {
  .hidden-xs {
    display: none;
  }
}
/* 768 ~ 992px小屏设备（平板） */
@media screen and (min-width: 769px) and (max-width: 992px) {
  .hidden-sm {
    display: none;
  }
}
/* 992 ~ 1200px中等屏幕（桌面显示器） */
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .hidden-md {
    display: none;
  }
}
/* 大于 1200px大桌面显示器 */
@media screen and (min-width: 1201px) {
  .hidden-lg {
    display: none;
  }
}

bootStrap框架使用总结

好处：
- 提供了各种组件，提供了开发效率
- 响应式布局本身代码难度很大，但它提供了一套响应式栅格系统和隐藏显示，大大方便了响应式网页的开发
坏处：
- 这些布局、样式、组件、特效是人家已经提供好的，不够灵活
什么使用它，什么时候不使用？
- 如果要制作完全自定义的网页（例如天猫、京东），则不使用bootstrap框架；(不适用)
- 如果网页比较简单，自定义不强，可以考虑使用bootstrap框架
- 仅供内部员工使用，不针对大众的网页（如后台管理系统），则可以使用bootstrap框架，这样会大大提高开发效率

蓝爱人

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
移动web

UI设计稿设计稿使用几倍图都行，如果是二倍图测量的像素值要除以2；如果是三倍图测量的像素值要除以3；图片图片在页面上显示的大小不由自身的尺寸决定，而是由设计稿的标注尺寸决定尽量使用稍微大点的图，以防图片变模糊；但又不能使用过大的图，因为会导致加载很慢；所以适中最好。...............
复制链接

扫一扫