CSS
1.css3的动画哪几个方法?
(1) @keyFrames
@keyframes name {
from{}
to {}
}
(2) animation
animation: name duration timing-function delay iteration-count direction fill-mode;
(3)transition
.box {
height: 100px;
width: 100px;
background: green;
transition: transform 1s ease-in-out 0s;
}
.box:hover {
transform: rotate(180deg) scale(.5, 1.5);
}
2.css3动画和js动画那个更好
js动画优缺点：
（1）动画控制能力比较强，可以中途暂停等操作
（2）缺点动画造成dom操作集中，回流和重绘成本比较高。
css动画优缺点：
（1）动画控制能力比较弱，中途不可以停止，代码冗杂。
（2）会使用硬件加速，浏览器会做优化，性能较好
(1)回流（重排）：当render tree中尺寸，布局，隐藏等会引起重新构建render tree
(2)重绘：只影响外观而不影响布局的是重绘。
回流必定会重绘，重绘不一定会回流。
(3)引起硬件加速的css3属性：transform,opacity,filter
3.css3实现帧动画,以及其他的解决方案
4.前端网页适配方案?
(1)部分概念
- 分辨率: 指屏幕上垂直和水平方向上的物理像素点个数,如iphone6的 1334pt x 750pt
- 屏幕尺寸: 屏幕斜对角长度,英寸为单位,1英寸 = 2.54cm
- 屏幕像素密度: 指每英寸拥有的像素数量. 屏幕像素密度 = 分辨率 / 屏幕尺寸
- 设备独立像素: 就是css像素.
- 设备像素比: 设备像素 / css像素,简称dpr,例如iphone6的水平设备像素750,css水平是375,所以iphone6的dpr是2
- 布局视口:布局视口是document.documentElement.clientWidth,是浏览器设置的一个布局角度的一个宽度,在pc上布局宽度就是浏览器的宽度,但是在移动端为了兼容原来pc的网页,布局视口比浏览器的宽度要宽很多.
- 视觉视口: 就是用户能看到的网页的css像素数量.pc端和移动端的就是浏览器的宽度.
-
在pc端,布局视口和视觉视口是联动的,当页面放大则共同放大; 在移动端,布局视口是不会随着缩放而改变的,当页面扩大,则视觉视口变小,反之成立.
pc端:
1122916-20180322175138463-1250424137.png
移动端:
1122916-20180322175151807-1129433865.png
- 理想视口: 将布局视口通过设置meta标签的width=device-idth,initial-scale=1变为浏览器宽度.
(2)flexible方案
根据window.devicePixelRatio设置布局视口的缩放,统一将1倍屏缩放为1,2倍屏的缩小0.5,3倍屏缩小0.33333333
这样就能面向一套设计图,兼容各个分辨率的屏幕了.
flexible.js将页面宽度分为100份,每一份为一个单位,10单位为1个rem(iphone为例: 设计图750px,每一份是7.5px,1rem = 75px)
iphone6例如:
image.png
(3)vw,vh方案
1vw等于屏幕宽度的1%,1vh等于屏幕高度的1%,后续详细了解此方案
网友评论