CSS3 of detail

墨蓝 2022-10-31 04:19 139阅读 0赞

# **细枝末节** #

1.  版本兼容
    
    <table style="width:500px;"> 
     <tbody> 
      <tr> 
       <td>prefix</td> 
       <td>browser</td> 
      </tr> 
      <tr> 
       <td>-webkit-</td> 
       <td>chrome/safari</td> 
      </tr> 
      <tr> 
       <td>-moz-</td> 
       <td>firefox</td> 
      </tr> 
      <tr> 
       <td>-ms-</td> 
       <td>ie</td> 
      </tr> 
      <tr> 
       <td>-o-</td> 
       <td>opera</td> 
      </tr> 
     </tbody> 
    </table>
2.  响应式网页设计  
    渐进增强--> iphone6向上兼容 兼容最新设备  
    优雅降级--> 开发通用版本 再兼容老版本，向下兼容  
      
    先移动端-->再pc端  
    先iphone6为初始原型开发-->兼容其它设备-->渐进增强
3.  性能相关
    
    reflow 对dom结构影响了就要reflow，消耗性能（改变窗体文字大小、内容，激活伪类，操作class属性，操作Dom，计算offsetWidth/Height，设置style属性）
    
    repaint 只是改变颜色等，性能消耗就少一点，而且速度快于reflow  
      
     
    
    触发GPU的方法：
    
    opacity:
    
    transform: translate3d() translatez(0)（用了transform就写上z，提醒浏览器用GPU，提高效率）
    
     
    
    GPU加速标准方法：will-change:transform; （提前告诉浏览器将transform变化放到另一个层）但是不能填all，属性值为具体哪个属性。最好就是属性变化前设置，不行就全局（相对耗多一点性能）  
    div\{  
    width:100px;  
    height:100px;  
    \}  
    div:hover\{  
    will-change:transform;  
    \}  
    div:active\{  
    transform:scale(2,3)  
    \}

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 DTCMS_Detail

<%@ Page Language="C" AutoEventWireup="true" CodeBehind="companyEdit.aspx.cs" Inheri

Love The Way You Lie/ 2023年10月16日 20:34/ 0 赞/ 31 阅读

相关 CSS3 of detail

细枝末节 1. 版本兼容 <table style="width:500px;"> <tbody> <tr>

墨蓝/ 2022年10月31日 04:19/ 0 赞/ 140 阅读

相关 CSS3 of box

box 标准盒子：box-width=border2+padding2+width IE6混杂模式盒模型：box-width=width 所以content-width

待我称王封你为后i/ 2022年10月31日 04:18/ 0 赞/ 1 阅读

相关 CSS3 of background

Background相关 background-image:url()/渐变颜色(linear-gradient()线性渐变,radial-gradient径向渐变类似

ゝ一纸荒年。/ 2022年10月31日 04:18/ 0 赞/ 151 阅读

相关 CSS3 of Border

Border相关 calc（50% - 盒宽/高度一半）内部必须有空格，可用于计算并设置left,top值，就不用再设置margin-top/left border-

╰半橙微兮°/ 2022年10月31日 04:17/ 0 赞/ 132 阅读

相关【3】More About Jobs and Job Details

参考链接[http://www.quartz-scheduler.org/documentation/quartz-2.2.x/tutorials/tutorial-lesso

秒速五厘米/ 2022年07月15日 23:50/ 0 赞/ 168 阅读

相关详解css3中的:nth-of-type(n)

该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯 :nth-of-type() CSS 伪类匹配同类型中的第n个同级兄弟

曾经终败给现在/ 2022年05月23日 07:29/ 0 赞/ 194 阅读

相关 Unity LOD-Level of Detail（多层次细节）用法教程

Unity LOD 多层次细节 -------------------- <table> <tbody> <tr> <td> <font>本文

深碍√TFBOYSˉ_/ 2022年02月12日 14:19/ 0 赞/ 304 阅读

相关 The detail deployment of website in tomcat

This post is about the deployment of website in tomcat. The detail step describes as fol

「爱情、让人受尽委屈。」/ 2022年01月15日 09:13/ 0 赞/ 195 阅读

相关 Some tips of handling master & details structure.(just test)

Table M, D for short of Master, Detail. 1, Having a Save button in Master section, Add

水深无声/ 2021年12月07日 14:29/ 0 赞/ 146 阅读