媒体查询

###响应式布局
使用相对单位 % rem vh vw
2:使用媒体查询，相当于在不同情况下令写了一套CSS样式
借助UI框架;因为UI是别人封装好的响应式.

###媒体查询
语法结构

@media媒体设备and ( 条件){
选择器{
属性:值;
}
}
@media 媒体查询
screen表示查询设备;媒体设备是个变量,在什么设备下就使用什么值
speech阅读设备all所有设备screen 电脑手机平板

• and 链接符号：并列条件
• （屏幕条件）
• max-width:230px |230px以下的尺寸中;使用媒体样式
• min-width:230px |表示在大于230px尺寸中使用媒体样式
• 总结：max 指的是屏幕最大时候;也及时当屏幕小于最大屏幕时条件成立
  min 指屏幕最小时，也就是当屏幕大于最小屏幕时条件成立

注意:媒体查询:使用方式
1.以一个端为主项目，它的样式;我们正常写的
2.需要兼容的端，它的样式我们写在媒体查询中
3.兼容性问题：ie10以下不兼容；其他都兼容

####过度
作用：在某个时间段可以显示css属性值变化的过程

• transition 有多个值
• 语法transition: 属性 时间，属性时间;
• 值为all表示选中所有属性
• transition-property 表示过渡属性
• transition-duration 过渡属性所需要时间
• trans ition-delay 过渡需要多少时间开始

####动画
使用动画流程
1：定义动画 @keyform
2：执行动画 animation`

2D

transform决定元素2d 3d
具体2D 3D变化走势;由函数决定函 数xxxx()
translate()
1个函数可以有多个参数
1个函数会输出一个结果
translate(300px 0px)实现的效果;就是这个函数输出的结果
300px 0px是translate的参 数
translate()作用改变元素位置的变化
参1：为x轴位置移动
参2：Y轴位置移动 正值向下 负值向上

transform 向元素应用 2D 或 3D 转换。

translate()

• 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
  rotate()
• 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
  实例
• 例如：值 rotate(30deg) 把元素顺时针旋转 30 度。

scale()

• 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew()

• 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
• 实例：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix()

###3D
应用场景;实现酷炫效果;在实际开发中;一般不会用到;
如果有需要;用的都是第三方库

###写代码注意事项
css 样式代码

• 先写盒子模型 再写布局代码;最后是其他样式

iframe

1.兼容性差;有很多错误减
2.可以实现单页面应用
3.如果选择原生开发，可以使用，前提;没有任何模板引擎。
单页面应该用,
一个项目中只有一个完成页面;其他的html文件不需要html head body等标签

模板引擎:
引用第三方库， 使用别人语法，写我们的代码。依然使用html只是语法有些不同
art-template 腾讯
ejs
jade

锚点