目录
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值，背景为白色是就能看到空白
为了显示出更好的效果，让图片随浏览器的宽度改变而改变，需要不强制设置图片的宽度，在屏幕较小时将图片隐藏，同时提前设置好另一种样式，在屏幕较小时显示
扫一扫
7148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
