移动web day7 | 响应式 媒体查询、BootStrap框架

目录

1 媒体查询

1.1 根据设备宽度的变化，设置差异化样式

1.2 基本语法:

1.2.1完整写法:

 1.2.2 外链式引入

2 BootStrap 

2.1 了解BootStrap

2.1.1 UI框架

2.2.2 BootStrap简介

2.2 使用

2.2.1 使用步骤

2.2.3 BootStrap栅格系统

版心

---

1 媒体查询

        简写:

1.1 根据设备宽度的变化，设置差异化样式

媒体特性常用写法

max-width:--px (当屏幕小于--时)min-width:--px  (当屏幕大于--时)

如下案例:

    body {
        background-color: green;
    }

    /* 媒体查询 不是选择器 会被层叠,如果body 放最后,会变全绿 */
    @media (max-width:1200px) {
        body {
            background-color: skyblue;
        }
    }

    @media (max-width:992px) {
        body {
            background-color: pink;
        }
    }

    @media (max-width:768px) {
        body {
            background-color: gray;
        }
    }

1.2 基本语法: 1.2.1完整写法:

关键词:and/only/not媒体类型:媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。媒体特性:主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。  1.2.2 外链式引入

---

2 BootStrap  2.1 了解BootStrap 2.1.1 UI框架

目标：知道 UI框架的作用

UI框架概念

         将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。 

作用

        基于框架开发，效率高，稳定性高。

2.2.2 BootStrap简介

目标：使用 BootStrap框架快速开发响应式网页

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。中文官网: https://www.bootcss.com/ 2.2 使用 2.2.1 使用步骤

1. 引入： BootStrap提供的CSS代码

2. 调用类：使用BootStrap提供的样式(参考官网手册)

2.2.3 BootStrap栅格系统

栅格化是指将整个网页的宽度分成若干等份BootStrap3默认将网页分成12等份

版心

Ø container：响应式布局版心类