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動畫優(yōu)缺點：
（1）動畫控制能力比較強，可以中途暫停等操作
（2）缺點動畫造成dom操作集中镜硕，回流和重繪成本比較高。
css動畫優(yōu)缺點：
（1）動畫控制能力比較弱，中途不可以停止眯杏，代碼冗雜鸯屿。
（2）會使用硬件加速坚芜，瀏覽器會做優(yōu)化，性能較好
(1)回流（重排）：當render tree中尺寸齿桃，布局惑惶，隱藏等會引起重新構建render tree
(2)重繪：只影響外觀而不影響布局的是重繪。
回流必定會重繪短纵，重繪不一定會回流带污。
(3)引起硬件加速的css3屬性：transform,opacity,filter
3.css3實現(xiàn)幀動畫,以及其他的解決方案
4.前端網頁適配方案?
(1)部分概念
- 分辨率: 指屏幕上垂直和水平方向上的物理像素點個數(shù),如iphone6的 1334pt x 750pt
- 屏幕尺寸: 屏幕斜對角長度,英寸為單位,1英寸 = 2.54cm
- 屏幕像素密度: 指每英寸擁有的像素數(shù)量. 屏幕像素密度 = 分辨率 / 屏幕尺寸
- 設備獨立像素: 就是css像素.
- 設備像素比: 設備像素 / css像素,簡稱dpr,例如iphone6的水平設備像素750,css水平是375,所以iphone6的dpr是2
- 布局視口:布局視口是document.documentElement.clientWidth,是瀏覽器設置的一個布局角度的一個寬度,在pc上布局寬度就是瀏覽器的寬度,但是在移動端為了兼容原來pc的網頁,布局視口比瀏覽器的寬度要寬很多.
- 視覺視口: 就是用戶能看到的網頁的css像素數(shù)量.pc端和移動端的就是瀏覽器的寬度.
-
在pc端,布局視口和視覺視口是聯(lián)動的,當頁面放大則共同放大; 在移動端,布局視口是不會隨著縮放而改變的,當頁面擴大,則視覺視口變小,反之成立.
pc端:
1122916-20180322175138463-1250424137.png
移動端:
1122916-20180322175151807-1129433865.png - 理想視口: 將布局視口通過設置meta標簽的width=device-idth,initial-scale=1變?yōu)闉g覽器寬度.
(2)flexible方案
根據window.devicePixelRatio設置布局視口的縮放,統(tǒng)一將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%,后續(xù)詳細了解此方案
