响应式布局

1.什么是响应式布局

响应式布局，检测设备信息，决定网页布局方式，一个网页适配多种屏幕，在不同分辨率的终端上不同展示方式
主要通过媒体查询来实现

2.响应式布局的优缺点

• 优点：为不同尺寸的终端完美展示页面，提升用户体验
• 缺点：代码冗余，网页体积变大，影响性能
  适合与企业官网，博客，新闻网站这些以浏览为主，没有过多交互的网站

3.媒体查询的作用

媒体查询式用来设置不同屏幕尺寸下的样式

4.媒体查询的使用方法

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

5.媒体查询条件的书写顺序

如果同时满足两个条件，以写在后面的为主，所以判断最小值 从小到大写， 判读最大值 从大到小写（bootstrap也是这么做的）

6.媒体查询引用样式文件的方法

7.min-width和min-device-width的区别

min-width指的是浏览器可视区域的宽度 （浏览器窗口放大或缩小会影响它）
min-device-width指的是设备的宽度（是固定的） （浏览器窗口放大或缩小不会影响它）
如果想要移动端和pC端都有效果 使用min-width

8.bootstrap框架介绍

bootstrap是HTML，CSS，Javascript框架，用于开发响应式布局，移动设备优先的web项目

9.bootstrap的特点

• 快速上手，适配所有的设备和项目
• 基于jQuery
• less和sass预处理脚本（Bootstrap 的源码式基于less和sass预处理脚本开发的，所以我们可以订制less或sass文件，然后编译成最终需要使用的CSS文件）
• 一个框架，多种设备（媒体查询）
• 文档齐全

10.bootstrap的头部封装

11.bootstrap中的布局容器

• .container (这个类用于固定宽度并支持响应式布局的容器。某个范围内宽度固定一个值 小于一定值后 宽度固定100%)
• .container-fluid（用于 100% 宽度，占据全部视口（viewport）的容器。pc端视口就是浏览器窗口的大小）

12.栅格系统

栅格系统是用来设置当前子元素，在指定屏幕下，占据默认的12等分中的几等分

• 添加容器
• 在容器中添加行.row
• 在row中添加子元素，设置栅格

13.栅格系统的一些样式

• col-xs-offset-2 （往右偏移两个栅格， 后面的元素同样偏移，因为是通过margin实现的）
• col-xs-push-2 (往右移动两个栅格，会覆盖后面的元素，因为是通过定位实现的)col-xs-pull-2 往左

        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
            
11
            
12
         
 
 
    

• hidden-xs(hidden-sm) (在指定宽度的屏幕下内容隐藏 display:none)

1

14.less的环境

less依赖于node,安装node后下载less,

• npm install -g less(下载后目录：C:\Users\18852034587\AppData\Roaming\npm\node_modules\less)
• 将less文件编译成css文件（lessc test.less test.css）

15.sublime下安装less文件即时编译插件

• 在sublime里安装好less（less语法高亮功能插件）和Less2Css（编译功能插件）这两个插件（Ctrl+Shift+p打开命令面板，输入install package并在下拉里选中install package）
• node下安装npm install -g less和npm install -g less-plugin-clean-css

15.less语法

• 变量
• 混合
• 嵌套
• 内置函数
• 作用域