Loading

关于谷歌webkit核心css3 translate3d渲染的问题

作者:kevin   分类:经验技巧分享   标签:CSS3    

今天给客户做的例子中发现的一个问题,谷歌浏览器目前最新版本 41.0.2272.89 m 里表现出来的,其他版本没测试,当执行后,内容会停留在原处,缩放一下窗口就变好了,代码是没有问题的,不用3D也没问题,那么肯定就是GPU渲染问题,最后找到了解决办法,在要执行的元素上加入transform:translate3d(0,0,0); 这样让页面载入时就启用GPU,完美解决。

常用css media

作者:kevin   分类:前端乱炖   标签:HTML5  CSS3    

/* 横屏 */
@media screen and (orientation:landscape){
      
}
/* 竖屏 */
@media screen and (orientation:portrait){
      
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
      
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
      
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
      
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
      
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
      
}
/* 打印 */
@media print{
      
}