国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

@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;
}

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

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

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

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