国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

rem / Vender Prefix / CSS extensions

khs1994 / 1680人閱讀

摘要：如果一個完整的界面是實驗性的，那么界面的名稱是前綴但是屬性和方法不會包括在內。如果一個實驗性或者方法被加入到一個標準的接口，獨立的方法或者屬性也會加上前綴。注意這些屬性只能在應用程序中使用，并不在標準軌道上。

我們知道，rem可以用來控制字體大小，也就是font-size，那么rem也可以用在例如height和width地方嗎，完全使用rem把px取代掉，可以嗎？

我自己寫了個demo，發現有一個很奇怪的現象：rem可以用在width和height，但是有點不準確。




    
    
    紅綠燈動畫
    
    


    

        123

12/16等于75%，而62.5%/100%等于62.5%。

這不是有毒嗎？說好的現在瀏覽器font-size初始值等于16px呢？

經過一系列排查，發現是chrome的初始font-size在小于12px時，還是會取12px，例如我們這里想設置為10px，但是還是會回到12px。

度娘告訴我：
chrome瀏覽器最小字體是12px，小于12px也會取為12px

解決辦法：
可以將font-size設置為625%，或者設置初始值到100px

但是這顯然不如10px方便，因為在移動端開發中，10px級的需求是更常見的，改成100px每次都去除以10，很麻煩。

最后在google經過一系列的關鍵詞索引搜索，終于找到一個stackoverflow上的優質問答：Font-size <12px doesn"t have effect in Google Chrome

* {
    -webkit-text-size-adjust: none;
}

但是并沒有什么卵用，有一個哥們兒說這玩意兒在chrome27以后就不能用了，然后甩出一個更不靠譜的回答。
規范里也沒說到底1rem等于多少，MDN的文檔也說得不太對，chrome的rem值怎么成31px了...所以我們還是暫時認個慫，就設置成100px算吧，用12px或者20px算更麻煩。

雖然沒有解決我們的本質問題：1rem==10px，但是有新的收獲！

不知道大家有沒有注意過，當我們遇到一些奇怪的css的問題的時候，總是會有-webkit，-moz等等開頭的奇怪的css屬性。

這些奇怪的-webkit，moz是什么呢？他們到底是什么呢？

通常的答案就是：瀏覽器前綴。錯！最標準的答案是供應商前綴！

MDN上有一篇非常好的文章，專門講供應商前綴：Vender Prefix

我這里簡單總結下核心要點：CSS前綴，接口前綴和屬性方法前綴。

CSS prefixes
主要的瀏覽器在用以下的前綴：

* -webkit- （Chrome,Safari,較新的Opera,幾乎所有的iOS瀏覽器，包括iOS的Firefox版本;基本上，所有支持WebKit的瀏覽器）
* -moz- (FireFox) 
* -o- (舊的，舊Webkit，部分Opera)
* -ms- (IE和Edge)

API prefixes
歷史上，供應商們也會用帶前綴的實驗性的API。如果一個完整的界面是實驗性的，那么界面的名稱是前綴（但是屬性和方法不會包括在內）。如果一個實驗性API或者方法被加入到一個標準的接口，獨立的方法或者屬性也會加上前綴。

Interface prefixes
接口名稱的前綴一般是首字母大寫的

* WebKit：（Chrome,Safari,較新的Opera,幾乎所有的iOS瀏覽器，包括iOS的Firefox：版本;基本上，所有支持WebKit的瀏覽器）
* Moz：(FireFox) 
* O：(舊的，舊Webkit，部分Opera)
* MS：(IE和Edge)

Property and method prefixes
屬性或者方法的前綴是小寫的：

* webkit：Chrome,Safari,較新的Opera,幾乎所有的iOS瀏覽器，包括iOS的Firefox版本;基本上，所有支持WebKit的瀏覽器）
* moz：(FireFox) 
* o：(舊的，舊Webkit，部分Opera)
* ms：(IE和Edge)

但是光知道他們是供應商前綴中的CSS前綴還遠遠不夠，*{ -webkit-text-size-adjust: none; }這個玩意我們還沒搞清楚，只知道-webkit是前綴了，那后面的text-size-adjust是什么，一個完整的-webkit-text-size-adjust是什么，難道僅僅是一個實驗性的css屬性嗎？

當然不是，因為-webkit-text-size-adjust的正確分類是CSS extensions，你沒有看錯，就是CSS插件，CSS也有插件?。ㄗ⒁猓@里的插件指的是瀏覽器引擎內部底層的插件，去約束或者定義一些CSS該如何執行的，而不是那種stylish之類的瀏覽器插件）

WebKit CSS extensions：https://developer.mozilla.org...
Mozilla CSS extensions：https://developer.mozilla.org...
Microsoft CSS extensions：https://developer.mozilla.org...

此處我將以WebKit CSS extensions為例，進行一些探索：
基于WebKit或者Blink的應用，例如Safari和Chrome，支持很多特殊的WebKit CSS插件。這些插件通常帶一個前綴-webkit。所有的-webkit前綴屬性可以用-apple前綴替代。一部分也支持-epub前綴。

WebKit-only properties(avoid using on websites)
注意：這些屬性只能在WebKit應用程序中使用，并不在標準軌道上。
-webkit-aspect-ratio

WebKit-prefixed properties on the standards track
標準棧上的WebKit的前綴屬性
-webkit-appearance

Formerly proprietary properties that are now standard
以前是現在標準的專有屬性
注：為了最大限度地提高CSS的兼容性，您應該使用沒有前綴的標準屬性，而不是下面列出的前綴。
-webkit-animation

Pseudo-elements and pseudo-classes
偽元素和偽類
:-webkit-autofill
::-webkit-file-upload-button

Media features
媒體特性
-webkit-animation

至于 Mozilla CSS extensions和Microsoft CSS extensions，本質上都是瀏覽器廠商各自引擎內部的插件，大概了解下就可以了。

吐槽一句，關注js的我昨天阿里電話一面被問了很多css問題，涼涼，后面要把css也抓起來，前端不扎實就走node后端這條路，感覺有點難走，唉，行路難啊...

That it !

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115651.html

相關文章

  • PostCSS真的太好用了！

    摘要：下面的代碼違反規則下面的代碼符合規則禁止使用十六進制顏色十六進制的顏色違反規則無效的十六進制色同樣違規下面的是符合規則的自動將十六進制色轉換為大寫或者小寫可以使用實現同樣的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官網有著這樣的對PostCSS特性介紹，箭頭后面是對應功能的插件及...

    SKYZACK 評論0 收藏0

  • Webpack 4.X 從入門到精通 - 第三方庫（六）

    摘要：在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的。使用第三方庫在入口文件當中直接導入安裝目錄結構如圖內容如下內容如下陳學輝內容如下這是自帶的內容如下內容如下引入后打開頁面會看到最后一個標簽有了一個綠色的背景。 在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的jquery。借助它們能提高開發效率，但是如何在webpack中使用呢。這篇文章介紹兩個東西，如何使用第三方庫以及...

    dunizb 評論0 收藏0

  • k8s ：kube-apiserver 啟動流程 - 1

    摘要：前言看源代碼有一段時間，總感覺在迷宮里亂竄，有時候覺得終于找到出口了，一下子又撞墻了，總結下來還是自己的內功不夠深厚，本文是對遺留，即將廢棄初始化流程以及數據結構的一個梳理，算是做個路標，便于以后在迷宮中還能找到回來的路主要功能是提供接 前言 看 k8s 源代碼有一段時間，總感覺在迷宮里亂竄，有時候覺得終于找到出口了，一下子又撞墻了，總結下來還是自己的內功不夠深厚，本文是對 kube-...

    wwolf 評論0 收藏0

  • k8s ：kube-apiserver 啟動流程 - 1

    摘要：前言看源代碼有一段時間，總感覺在迷宮里亂竄，有時候覺得終于找到出口了，一下子又撞墻了，總結下來還是自己的內功不夠深厚，本文是對遺留，即將廢棄初始化流程以及數據結構的一個梳理，算是做個路標，便于以后在迷宮中還能找到回來的路主要功能是提供接 前言 看 k8s 源代碼有一段時間，總感覺在迷宮里亂竄，有時候覺得終于找到出口了，一下子又撞墻了，總結下來還是自己的內功不夠深厚，本文是對 kube-...

    RayKr 評論0 收藏0

  • Next框架與主流工具的整合（二）—— 完善與優化

    摘要：從概念來說，就是設備的物理像素與設備獨立像素也就是邏輯像素，以下就稱為邏輯像素的比率。通過這個標簽，我們可以實現初始縮放，就可以達到的邏輯像素眼睛在設備上看起來的，換句話說可以在上充滿豎屏的整個寬度。 前言：18年12月24日項目成功上線了，在經歷了兩周的線上bug、UI以及代碼優化后，解決了不少問題，于是再完善與優化一下這個項目。 布局優化 高清配置 antd-mobile 自定義...

    teren 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<