bootstrap

屏幕尺寸(宽度)

• 超小屏幕，宽度 < 768， 如：手机

• 小型屏幕，768 <= 宽度 < 992，如：平板

• 中等屏幕，992 <= 宽度 < 1200，如：电脑

• 超大屏幕，宽度 >= 1200，如：电视

响应式布局

• 根据不同的客户端显示不同的效果，就称为响应式布局。

• 由于移动设备访问网站的比例大幅提升(已经成为主流)，因此我们设计网站时需要移动设备有限考虑。

解决方案

• 根据不同的客户端，跳转到不同的网站

  • 适合于几乎无法兼容的大型网站，如：京东

  • 客户端类型判断：window.navigator['userAgent']

• 使用媒体查询

  • 说明：适合于不太复杂的可以兼容的网站(一般都不太大)

  • 语法：

    @media              媒体查询标志
    [only] screen  [只]支持屏幕
    and     并且的意思
    min-width   最小宽度
    max-width   最大宽度
    min-height   最小高度(了解)
    max-height   最大高度(了解)

  • 使用方式1：使用@media指定

    
    @media screen and (max-width:768px) {
        div {
            width: 100%;
            height: 200px;
            background: green;
       }
    }

  • 使用方式2：使用@import导入

    
    @import url(02-chaoxiao.css) screen and (max-width:768px);

  • 使用方式3：使用link标签，然后指定media属性

    
    <link rel="stylesheet" type="text/css" href="02-chaoda.css" media="screen and (min-width:1200px)">

viewport(了解)

• 说明：viewport 是用户网页的可视区域，翻译为中文可以叫做"视区"。

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

• height：和 width 相对应，指定高度。

• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

• maximum-scale：允许用户缩放到的最大比例。

• minimum-scale：允许用户缩放到的最小比例。

• user-scalable：用户是否可以手动缩放，设为no禁止缩放

• 示例：<meta name="viewport" content="width=device-width, initial-scale=1.0">

• viewport(了解)

  • 说明：viewport 是用户网页的可视区域，翻译为中文可以叫做"视区"。

  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

  • height：和 width 相对应，指定高度。

  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

  • maximum-scale：允许用户缩放到的最大比例。

  • minimum-scale：允许用户缩放到的最小比例。

  • user-scalable：用户是否可以手动缩放，设为no禁止缩放

  • 示例：<meta name="viewport" content="width=device-width, initial-scale=1.0">

  bootstrap

  • 简介：

    • Bootstrap 是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架。

    • Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

    • 中文官网：http://www.bootcss.com/

    • 下载：用于生产环境的版本

    • 使用：拷贝基础模板，记得修改依赖文件的路径。

  • 语法：

    • 容器：所有的元素都要放在容器中，然后才能使用bootstrap提供的样式

      • containre：固定尺寸(有留白)

      • container-fluid：流式布局(填满)

    • 栅格系统：将给的的区域划分为12等分，通过份数来设置宽度

      • 行：row、

      • 份数：col-xs-份数、col-sm-份数、col-md-份数、col-lg-份数

      • 列偏移：col-xs-offset-份数、col-sm-offset-份数、col-md-offset-份数、col-lg-offset-份数

      • 列排序：col-md-push-份数（向右）、col-md-pull-份数（向左）

      • 栅格系统可以嵌套

  • 使用：重点是复制粘贴

  • 全局CSS样式

  • 组件使用

  • 可视化布局工具：LayoutIt

转载于:https://www.cnblogs.com/542684416-qq/p/9855578.html