2021-05-29

移动准备工作：
弹性盒
媒体查询
Dpi(ppi) dpr retina

Iphone
Ppi-----每英寸所拥有的像素数
Dpi—每英寸所拥有的像素数

Ppi值越大，屏幕越清晰。

分辨率
1000*400

尺寸：屏幕对角线 （单位英寸）

常见iphone 设计图：
640px 750px 1080px--------(物理像素)
Iphone5 iphone6/7/8 iphone6/7/8plus
320px 375px 414px-------(设备独立像素/逻辑像素，在这里指的是css设置像素)

Dpr----移动页面关系很大

Dpr=物理像素/设备独立像素（逻辑像素）（css设置px）

单位：
px
em-------父标签决定字体大小
rem------根元素（html）决定字体大小
vw----视口宽度 1vw=视口宽度的1%
vh-----视口高度 1vh=视口高度的1%
vmax—vw和vh取最大值
vmin-----vw和vh取最小值
支持ie9+

移动常见布局方式：
1：弹性布局（100%布局）
用于文字流式，控件弹性，图片等比缩放

2：等比缩放布局（rem布局），混合布局
A：媒体查询和rem结合布局
媒体查询查询不同的机型（查询大概区间）
量出大小----css像素----rem单位
B：vw和rem布局
设置根元素字体大小的单位转换为vw单位。Html{font-size:vw}
量出大小----css像素----rem单位（注意：除的根元素字体大小的单位还是px）

C: flexble.js插件
不要添加视口
引入flexble.js
量出大小—rem单位（量出大小/100px）

渐变：
1.线性渐变：从一个方向到另外一个方向颜色的变化
Background:linear-gradient(direction,color1,color2…)-----标准写法

从一个边到另外一个边
Direction: to left/right/top/bottom (到left/right/top/bottom)
从一个角到另一个角
Direction:to left top/right top/left bottom/ right bottom
线有角度倾斜
Direction:xxxdeg;

Background:-webkit-linear-gradient(direction,color1,color2…)------兼容写法
从一个边到另外一个边
Direction: left/right/top/bottom (从left/right/top/bottom开始渐变)
从一个角到另一个角
Direction:left top/right top/left bottom/ right bottom
线有角度倾斜
Direction:90-xxxdeg;(标准写法+兼容写法角度=90deg)

颜色不均匀分布
Background:linear-gradient(direction,Color2 xx%,color2 xxx%…)

2.径向渐变:从一个点到四周的变化（放射性渐变）
兼容：
Background:-webkit-radial-gradient(点的位置，渐变形状，渐变大小，渐变颜色)
Background:-moz-radial-gradient()
Background:-ms-radial-gradient()
Background:-o-radial-gradient()

点的位置：
默认 中心点 center center （center）
Left/right/center top/bottom/center
百分比
Px

渐变形状：
默认椭圆（ellipse）
正圆：circle

渐变大小：
Farthest-corner(默认值)-----最远角
Farthest-side---------最远边
Closest-corner-------最近角
Closest-side---------最近边

颜色：color1 x%，color2 X%…

注意：
1径向渐变一定要添加浏览器前缀
2 渐变形状不能和渐变大小同时设置，同时设置的时候，不能正常显示

重复性的线性渐变
Repeating-linear-gradient(direction，color x% ，color2 xx%…)

重复性的径向渐变
-webkit/moz/ms/o-Repeating-radial-gradient(color x% ，color2 xx%…)

Css过渡效果：
Transition:
Transition-property:参与过渡的属性
Transition-duration:过渡持续时间（必需要写）
Transition-delay：过渡延迟时间
Transition-timing-function:过渡动画类型

Transition-property:常用all .单独设置参与过渡属性，比如width ,height ,
transition: width 1s,height 1s;

Transition-timing-function:
linear(匀速) ease(逐渐慢下来，默认) ease-in(加速) ease-out(减速) ease-in-out(先加后减)

Css3 2d效果
Transform:
1平移
translateX() ----水平平移
translateY()----垂直平移
Translate(x,y): 注意：translate(x)

2：缩放
scaleX(number):number取值 >1-----放大 =1------不变 (0-1)-----缩小 =0-----没了 可以取负值，表示取反（图片反了）。

3：旋转
rotateX()
rotateY()
Rotate()

4：倾斜
Skew()
skewX()
skewY()

5.变形原点 transform-origin:center center(默认的值)
取值：
Left/right/center top/center/bottom
px