了解css兼容性處理方式是什么？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

公司主營業(yè)務(wù)：做網(wǎng)站、網(wǎng)站設(shè)計(jì)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出惠安免費(fèi)做網(wǎng)站回饋大家。

css兼容性處理方式有：1、對樣式進(jìn)行初始化；2、添加瀏覽器私有屬性，如【-moz】代表firefox瀏覽器私有屬性；3、使用自動化插件，如自動管理瀏覽器前綴的插件Autoprefixer。

處理方法：

一、樣式初始化

每個瀏覽器的css默認(rèn)樣式不盡相同，所以最簡單有效的方式就是對其進(jìn)行初始化

* { 
  margin: 0; 
  padding: 0; 
}

如果不知道該初始化什么，推薦一個初始化CSS樣式庫normalize.css，選取展示其中幾個樣式設(shè)置，如下：

html { 
  line-height: 1.15; /* Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
} 
  
body { 
  margin: 0; 
} 
  
a { 
  background-color: transparent; /* Remove the gray background on active links in IE 10. */
} 
  
img { 
  border-style: none; /* Remove the border on images inside links in IE 10. */
}

二、添加瀏覽器私有屬性

-moz- 代表firefox瀏覽器私有屬性

-ms- 代表IE瀏覽器私有屬性

-webkit- 代表chrome、safari私有屬性

-o-代表opera私有屬性

對于私有屬性的順序要注意，把標(biāo)準(zhǔn)寫法放到最后，兼容性寫法放到前面

-webkit-transform:rotate(-3deg); /*為Chrome/Safari*/
-moz-transform:rotate(-3deg); /*為Firefox*/
-ms-transform:rotate(-3deg); /*為IE*/
-o-transform:rotate(-3deg); /*為Opera*/
transform:rotate(-3deg);

三、使用自動化插件

Autoprefixer是一款自動管理瀏覽器前綴的插件，把Autoprefixer添加到資源構(gòu)建工具（例如Grunt）后，可以完全忘記有關(guān)CSS前綴的東西，只需按照最新的W3C規(guī)范來正常書寫CSS即可

//我們編寫的代碼 
div { 
 transform: rotate(30deg); 
} 
  
// 自動補(bǔ)全的代碼，具體補(bǔ)全哪些由要兼容的瀏覽器版本決定，可以自行設(shè)置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}

webpack 中配置 postcss-loader 和 postcss-preset-env 也可以處理兼容問題

module: {
  rules: [{
    test: /\.css$/,
    use: [
      // 這個 loader 取代 style-loader。作用：提取 js 中的 css 成單獨(dú)文件 
      MiniCssExtractPlugin.loader,
      // 將 css 文件整合到 js 文件中 
      'css-loader',
      //修改 loader 配置
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            // postcss 的插件 
            require('postcss-preset-env')()
          ]
        }
      }
    ]
  }]
}

// package.json
"browserslist": { 
  //開發(fā)環(huán)境配置
  "development": [ 
    "last 1 chrome version", 
    "last 1 firefox version", 
    "last 1 safari version" 
  ],
  //生產(chǎn)環(huán)境配置
  "production": [ 
    ">0.2%", 
    "not dead", 
    "not op_mini all" 
  ] 
}

感謝各位的閱讀！看完上述內(nèi)容，你們對css兼容性處理方式是什么大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。