移动准备工作:
弹性盒
媒体查询
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