問(wèn)題描述

現(xiàn)在有一需求定義css3動(dòng)畫如下

@keyframes ani{ 0% { -webkit-transform: translate(0, 0); } 100%{ -webkit-transform: translate(-269px, 65px); }}

作用的元素如下

.page1 .content { position: absolute;}.page1 .content.p1 { top: 8%; margin-top: -10px; left: -100%; width: 100%;}.page1 .content.p1.show { animation: ani .8s ease .2s; animation-fill-mode: forwards;}

以上動(dòng)畫是以iphone4和iphone5的屏幕尺寸來(lái)設(shè)計(jì)的效果為圖片傾斜著飛入iphone4/4s/5/5s/5c顯示效果都良好但是如果再進(jìn)一步要適配到iphone6/6p動(dòng)畫飛入的距離translate(-269px, 65px)就出現(xiàn)了問(wèn)題即動(dòng)畫距離不夠這時(shí)應(yīng)該是使用media屬性來(lái)對(duì)動(dòng)畫進(jìn)行重寫嗎?如

@media screen and (min-height: 667px) { @keyframes ani{.............. }}

使之在iphone6/6p大屏幕下也能顯示良好??

明確問(wèn)題我想問(wèn)的是,css3動(dòng)畫如translate(x,y)是否在適配各種分辨率時(shí)都要重寫以達(dá)到最好效果有沒(méi)有辦法只寫一次,不同分辨率下也有良好的效果,如百分比寫法translate(50%,50%)當(dāng)然我知道百分比是不可行的,所以來(lái)問(wèn)問(wèn)有沒(méi)有其他方法

問(wèn)題解答

自問(wèn)自答看這里

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*iphone 6*/}@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*iphone 6 plus*/}

最好是針對(duì)IP6來(lái)寫