用css3动画写了一个浪漫的3d动画，终于有勇气和女神表白了

响应式布局

1.使用相对单位 % rem vh vw
2.使用媒体查询。相当于在不同情况下令写了一套css样式
3.借助UI框架；因为UI是别人封装好的响应式。

媒体查询

1.语法结构
@media 媒体设备 and （条件） {
选择器 {
属性：值；
}
}

• @media 表示媒体查询
• scrern 表示查询设备；媒体设备是个变量，在什么设备下使用什么值
  speech 阅读设备 all 所有设别 screen 电脑手机平板
• and 链接符号； 并列条件
• (屏幕条件)
• max-width：230px 在 230 px 以下的尺寸中；使用媒体样式
• min-width：230px 表示在 大于230px 尺寸中使用媒体样式
• 总结：max 指的是屏幕最大的时候；也就是屏幕小于最大屏幕时条件成立
  min 屏幕最小时，也就是当屏幕大于最小屏幕时，条件成立

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

过度

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

• transition 有多个值
• 语法 transition：属性 时间，属性 时间；
• 值为 all 表示选中所有属性
• transition-property :表示过度属性
• transition-deration :过渡属性所需时间
• transition-delay ：过度需要多少时间开始

动画

使用动画流程：

• 1.定义动画 @keyform
• 2.执行动画 animation

2D

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