目录
1.rem布局
2.媒体查询
什么是媒体查询
语法规范
mediatype查询类型
关键字
媒体特性
3.Less基础
维护css的弊端
less介绍
less变量
less嵌套
less运算
4.rem适配方案
rem实际开发适配方案1
设计稿常见尺寸宽度
动态设置html标签font-size大小
元素大小取值方法
苏宁易购网页制作
第一种不加js
第二种加js
rem实际开发适配方案2
5.响应式布局
响应式布局开发原理
编辑
响应式布局容器
Bookstrap前端开发构架
Bookstrap简介
Bookstrap使用
创建文件夹
创建html骨架结构
引入相关样式文件
书写内容
Bookstrap布局容器
编辑
Bookstrap栅格系统
编辑
栅格选项参数
编辑
编辑
列嵌套
列偏移
列排序
Bookstrap响应式工具
案例
1.rem布局
rem也是一个相对单位，是相对于html元素的字体大小；可以在最开始设置html的字体大小，后面的宽和高都可以用rem来表示
em相对于父级元素字体大小
2.媒体查询
什么是媒体查询
媒体查询是CSS3新语法，可以针对不同的媒体类型定义不同的样式；
在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
语法规范
@media mediatype and/not/only (media feature){
CSS-code;
}
mediatype查询类型
all用于所有设备； print用于打印机和打印预览；
screen用于电脑屏幕、平板电脑、智能手机等
关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and可以将多个媒体特性连接到一起，相当于“且”的意思
not排除某个媒体类型，相当于“非”的意思，可以省略
only指定某个特定的媒体类型，可以省略
媒体特性
每种媒体类型都具体有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格
都要加小括号
width 定义输出设备中页面可见域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
媒体查询一般按照从小到大或者从大到小的顺序来写
将页面设置在一个范围内时，需要用and来连接最小值和最大值；
在本题中也可以省去969px这一项，只写最小值540px和最小值970px（后面出现的，没有截）运用的是css的层叠性
随着浏览器页面的拉缩，文字背景和文字本身都发生改变
3.Less基础
维护css的弊端
less介绍
less变量
变量是指没有固定的值，可以改变的
@变量名：值；
变量名规范：必须以@为前缀； 不能包含特殊字符； 不能以数字开头； 大小写敏感
在样式最上方定义一个变量后，后面再写到该变量的设置可以直接引用@变量名
less嵌套
在less文件中直接将子元素写在父元素内，在保存时css文件可将其转换为正常格式，简化代码格式
header{
.logo{
width:300px;
}
}
遇见交集/伪类/伪元素选择器，需要在它们前面添加上&符号；如果没有这个符号，那么就会被解析为子元素
less运算
在less文件中可以直接进行运算，保存后css文件中可得出结果
- 注意乘号和除号的写法
- 运算符中间左右都有一个空格隔开
- 对于两个不同单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
在下下图中，在代码中直接进行运算，并且颜色也可进行加减渲染，还利用了运算律
4.rem适配方案
rem实际开发适配方案1
设计稿常见尺寸宽度
动态设置html标签font-size大小
在不同的屏幕下，可以发现元素盒子的宽和高都还是呈比例缩放的
元素大小取值方法
html font-size字体大小=屏幕宽度/划分的份数
页面元素的rem值= 页面元素值（px）/html font-size字体大小
苏宁易购网页制作
第一种不加js
新建common.less文件，设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小；划分的份数定为15份，默认html字体大小为50px,这句话写到最上面
页面引入，可以将一个less文件引入到另一个less文件，在html文件中就可以只引入一个less文件，简化代码
@import "less文件名"
impor是将一个样式文件导入到另一个样式文件中，而link是将样式文件引入到html页面中
body样式，宽度写的是15rem,没有写具体值
第二种加js
rem实际开发适配方案2
5.响应式布局
响应式布局开发原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。
响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素实现变化效果
原理：在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
父盒子都定义为container
Bookstrap前端开发构架
Bookstrap简介
Bookstrap使用
创建文件夹
创建html骨架结构
引入相关样式文件
书写内容
直接拿Bookstrap预定好的样式放到自己的代码中，还可以进行修改，修改不成功时要注意权重问题
Bookstrap布局容器
定义一个container类后，不需要再使用媒体查询再定义，bookstrap预先定义好了这个类，一般用于响应式布局
container-fluid百分比布局，占浏览器宽度的全部，用于单独做移动端开发
Bookstrap栅格系统
栅格系统是将页面划分为等宽的列，通过列数的定义来模块化页面布局
Bookstrap是将container划分成了12等份,container变大每一份就会变大，反之会变小
栅格选项参数
栅格系统用于通过一系列的行（row）和列（column）的组合来创建页面布局，需要将内容放入这些创建好的布局中
根据container的宽度来设置不同的类前缀
class=".col-lg-2"表示占两份
如果所有子项的份数加起来小于12，那么container就会有空余；如果所有子项的份数加起来大于12，那么多余的子盒子就会被挤到下面一行
每一列都默认有左右15像素的padding
在类名的定义时，可以添上在不同屏幕大小时每个子项所占的份数，放在一起写，在调用时要用相同类名调用的方法来写
列嵌套
栅格系统将内容再次嵌套时，为了消除padding值的影响，需要在添上一个row元素，再将嵌套的小盒子放在新的row元素内，这样就取消了父元素的padding值而且高度自动和父级一样高。
如果想要盒子中间由空隙，是不能加margin值的，加了之后会把盒子挤掉，以为三个盒子时每个盒子的宽度是33.3333%，有多少个盒子，这多少个盒子就会把整个浏览器宽度平分，可以再在每个盒子里面放一个小盒子来实现有空袭的效果。
列偏移
使用.col-md-offset-份数 类可以使盒子向右偏移，会自动给偏移的盒子添加边距
想让两个盒子左右分开，让第二个盒子向右偏移12减去两个盒子的宽度；想让一个盒子水平居中，让盒子向右偏移12减去该盒子的宽度再除以2
列排序
使用.col-md-push-份数 将左边的盒子推到右侧；使用.col-md-pull-份数 将右边的盒子拉到左边
Bookstrap响应式工具
添加类名hidden-屏幕 可以实现再相应的屏幕大小下隐藏盒子；添加visible-屏幕 可以实现仅在相应的屏幕大小下显示内容
案例
给盒子添加一个row的父盒子，就能让子盒子顶着父盒子的边缘
去掉padding值需要考虑权重问题；还要考虑将插入图片的宽度设置为和子盒子一样宽，这样图片才能达到缩放的效果
盒子中间有间隔，但是不能直接设置margin值会把盒子挤掉，设置内边距padding-right值，背景为白色是就能看到空白
为了显示出更好的效果，让图片随浏览器的宽度改变而改变，需要不强制设置图片的宽度，在屏幕较小时将图片隐藏，同时提前设置好另一种样式，在屏幕较小时显示
