bootstrap 原理以及使用方式

    meta 标签的作用，将页面大小，根据分辨率不同进行相应的调节，以展示给用户相同大小的内容
    meta默认视口大小约为980px
    content="width=device-width initial-scale=1.0 use-scalable=no "  
    width：是设置网页的宽度，等于设备的宽度  在iPhone或者iPad上横竖屏的宽度等于竖屏的宽度
    initial-scale： 设置初始化视口的缩放比   在windows系统的ie浏览器上的横竖屏的宽度等于竖屏的宽度
    use-scalable: 是否允许用户对网页进行缩放
    css像素会根据设备像素进行计算 1css像素 == 1 是设备像素，根据设备的分辨率，dpi值来计算css像素真正展示大小  适配各种不同分辨率的设备
    实现响应式布局：
    1.流体网格布局： 可伸缩的网格（大小宽高 都是可以伸缩， 可用flex或者百分比来控制），布局上面元素大小不固定可伸缩
    2.弹性图片，图片宽高不固定（可设置min-width = 100%）
    3.媒体查询： 让网页在不同设备的终端上面展示效果相同（让用户体验相同，用着更爽）， 在不同的设备（大小不同，分辨率不同）上面均展示合适的页面
    4.主要断点， 设备宽度的临界点， 大小区别， 宽度不同， 根据不同宽度展示不同的样式
    媒体查询： 向不同设备提供不同样式的一种方式，他让每种类型的用户提供最佳体验，
    css2: 媒体查询（media type）,通过media type 我们可以对不同设备的指定特定样式，从而实现更丰富的界面
    css3: 媒体查询（media query） 对media type的增强，事实上我们可以将media query看成是meida type + css属性（媒体特性）判断
    引入方式： 前两种是外部引用 后一种在内部引用
    1. <link meida="(max-width: 375px) href="xxxx"/>
    2.@import 'xxx' (max-width:375px)
    3. @media(max-width: 375px){
        设置样式
    }
    注意：媒体查询，不占用权重，一般在最后引用媒体查询
    媒体查询的符号： and并且 , ','或者， not（除了）, only(只允许)
    相对单位：
    rem: 相对于根节点的大小，根标签的font-size大小， 10倍扩大
    em: 相对于自己本身的font-size值，10被扩大， font-size属性可以继承
    px： 相对于显示器的分辨率
    vw,vh： 根据显示器的宽度,根据meta标签里面视口的content里面的宽度
    Vmax,Vmin: 查找视口宽高中根据最大，最小的分成100份
    响应式网页设计是最佳的选择呢？
    不是的，通过三个预算，人力，物力，财力
    目标用户，
    产品定位，
    渐进增强 ---》 向上兼容，兼容新设备
    优雅降级 ---》 开发通用版本，再兼容老版本，向下兼容
    响应式开发步骤：
    先开发移动端 ---》 pc端 ----》 通过渐进增强, 使用bootstrap
-->