最近，我想在網(wǎng)站上展示iPhone。我希望用戶能夠在此“模擬”手機(jī)上與應(yīng)用程序演示進(jìn)行交互，因此必須在CSS中渲染，而不是圖像。我找到了一個(gè)很棒的圖書館，稱為Marvelapp/devices.css。圖書館用純CSS實(shí)現(xiàn)了我需要的設(shè)備，它們看起來很棒，但是有一個(gè)問題：它提供的設(shè)備沒有響應(yīng)速度（即無法縮放）。一個(gè)空曠的問題列出了一些選項(xiàng)，但每個(gè)選項(xiàng)都有瀏覽器不兼容或其他問題。我著手修改庫，以使設(shè)備響應(yīng)迅速。

這是最終可重大的庫。下面，我們將瀏覽創(chuàng)建它所涉及的代碼。

原始庫是用Sass編寫的，並使用具有固定尺寸的像素的元素來實(shí)現(xiàn)設(shè)備。作者還為每個(gè)設(shè)備提供了一個(gè)直接的HTML示例，包括我們將在本文中使用的iPhone X。這是原件。請注意，它呈現(xiàn)的設(shè)備雖然詳細(xì)，但很大，並且不會更改尺寸。

這是方法

我用來使設(shè)備可重大的三個(gè)CSS技巧：

1. calc（），即使輸入具有不同的單位，也可以執(zhí)行計(jì)算的CSS函數(shù)
2. - size-divisor，與var（）函數(shù)一起使用的CSS自定義屬性
3. @Media查詢以最小寬度分開

讓我們看一下它們。

c alc（）

CSS calc（）函數(shù)允許我們更改設(shè)備各個(gè)方面的大小。該函數(shù)將表達(dá)式作為輸入，並以適當(dāng)?shù)膯挝环祷貙敵龅脑u估。如果我們想將設(shè)備的原始尺寸的一半製成，則需要將每個(gè)像素測量值除以2。

前：

寬度：375px;

後：

寬度：計(jì)算（375px / 2）;

第二片片段的長度是第一片摘要的一半。原始庫中的每個(gè)像素測量都需要包裝在Calc（）函數(shù)中，以使整個(gè)設(shè)備大小。

var（ - 大小劃分）

在文件開頭，必須先聲明CSS變量，然後才能在任何地方使用。

 ：根 {
  - 尺度劃線：3;
}

因此，通過var（）函數(shù)可以在整個(gè)樣式表中訪問此值。這將非常有用，因?yàn)槲覀兿Ｍ谡{(diào)整設(shè)備大小時(shí)將所有像素計(jì)數(shù)除以相同的數(shù)字，同時(shí)避免魔術(shù)數(shù)字並簡化使設(shè)備響應(yīng)響應(yīng)所需的代碼。

寬度：calc（375px / var（ -  size-divisor））;

隨著上面定義的值，這將返回原始寬度以像素為單位的三個(gè)。

@媒體

為了使設(shè)備響應(yīng)迅速，它們必須響應(yīng)屏幕尺寸的變化。我們使用媒體查詢來實(shí)現(xiàn)這一目標(biāo)。這些查詢觀看屏幕的寬度，如果屏幕尺寸交叉給定閾值，則它們會發(fā)射。我選擇了基於Bootstrap的X，SM等尺寸的斷點(diǎn)。

無需以零像素的最小寬度設(shè)置斷點(diǎn)。相反，文件開頭的root聲明處理這些超級小屏幕。這些媒體查詢必須在文檔的末尾進(jìn)行，並以最小寬度順序排列。

 @Media（最小寬度：576px）{
 ：根 {
   - 尺度劃線：2;
 }
}
@Media（最小寬度：768px）{
 ：根 {
   - 尺度劃線：1.5;
 }
}
@Media（最小寬度：992px）{?
 ：根 {
   - 尺度劃線：1;
 }
}
@Media（最小寬度：1200px）{?
 ：根 {
  -size-divisor：.67;
 }
}

在這些查詢中更改值將調(diào)整設(shè)備所經(jīng)歷的調(diào)整大小的大小。請注意，calc（）和整數(shù)一樣處理浮子。

用Python預(yù)處理預(yù)處理器

借助這些工具，我需要一種將我的新方法應(yīng)用於數(shù)千個(gè)庫的方法。結(jié)果文件將以變量聲明開頭，包括整個(gè)庫，其中包含在Calc（）函數(shù)中包含的每個(gè)像素測量值，並以上述媒體查詢結(jié)尾。

我沒有手工準(zhǔn)備更改，而是創(chuàng)建了一個(gè)Python腳本，該腳本會自動轉(zhuǎn)換所有像素測量值。

 DEF量表（令牌）：
 如果令牌[-2：] =='; \ n'：
  返回'calc（'token [： -  2]' / var（ -  size-divisor））; \ n'
 elif令牌[-3：] =='）; \ n'：
  返回'（'token [： -  3]' / var（ -  size-divisor））; \ n'
 返回'calc（'token' / var（ -  size-divisor））''

給定一個(gè)包含NNPX的字符串返回calc（nnpx / var（ - size-divisor））;。在整個(gè)文件中，幸運(yùn)的是，像素只有三個(gè)匹配：nnpx，nnpx;和nnpx）;。其餘隻是字符串串聯(lián)。但是，這些令牌已經(jīng)是通過將每條線與空間字符分開來生成的。

 def build_file（SCSS）：
 out ='：root {\ n \ t- size-divisor：3; \ n} \ n \ n'
 對於SCSS中的行：
  tokens = line.split（''）
  對於我的範(fàn)圍（len（dokens））：
   如果令牌中的“ px” [i]：
    令牌[i] =比例（令牌[i]）
  out =''.join（令牌）
 out =“ @media（最小寬度：576px）{\ n \
  ：root {\ n \ t-size-divisor：2; \ n \
  } \ n} \ n \ n@media（min-width：768px）{\ n \
  ：root {\ n \ t-size-divisor：1.5; \ n \
  } \ n} \ n \ n@media（min-width：992px）{\
  \ n：root {\ n \ t- size-divisor：1; \ n \
  } \ n} \ n \ n@media（min-width：1200px）{\
  \ n：root {\ n \ t-size-divisor：.67; \ n} \ n}
 返回

構(gòu)建新庫的此功能從聲明CSS變量開始。然後，它通過整個(gè)舊庫迭代以尋找像素測量值進(jìn)行擴(kuò)展。對於它發(fā)現(xiàn)包含PX的數(shù)百個(gè)令牌中的每個(gè)代幣中的每個(gè)令牌，它都會縮放令牌。隨著迭代的進(jìn)行，該函數(shù)通過重新加入令牌來保留原始線結(jié)構(gòu)。最後，它附加了必要的媒體查詢，並將整個(gè)庫作為字符串返回。一點(diǎn)點(diǎn)代碼運(yùn)行功能並從文件中讀取和寫入作業(yè)。

如果__name__ =='__ -main __'：
 f = open（'decession_old.scss'，'r'）
 scss = f.Readlines（）
 f.close（）
 out = build_file（scss）
 f = open（'decectices_new.scss'，'w'）
 F.Write（OUT）
 f.close（）

此過程在Sass中創(chuàng)建了一個(gè)新庫。要?jiǎng)?chuàng)建最終使用的CSS文件，請運(yùn)行：

 sass devices_new.scss devices.css

這個(gè)新圖書館提供相同的設(shè)備，但它們反應(yīng)迅速！這裡是：

要讀取實(shí)際的輸出文件，即數(shù)千行，請?jiān)贕itHub上查看。

其他方法

儘管此過程的結(jié)果非常引人注目，但要獲得它們是有些工作。為什麼我不採用更簡單的方法？這是另外三種方法，其優(yōu)點(diǎn)和缺點(diǎn)。

飛漲

最初有希望的方法是使用Zoom擴(kuò)展設(shè)備。這將統(tǒng)一擴(kuò)展設(shè)備，並且可以與我的解決方案一樣與媒體查詢配對，但是在沒有麻煩的Calc（）和可變的情況下起作用。

這是出於簡單原因而起作用的：Zoom是一個(gè)非標(biāo)準(zhǔn)屬性。除其他局限性外，F(xiàn)irefox不支持它。

用EM替換PX

另一種發(fā)現(xiàn)和重複的方法規(guī)定用EM代替PX的所有實(shí)例。然後，設(shè)備根據(jù)字體尺寸縮小和生長。但是，使它們足夠小以適合移動顯示屏，可能需要微小的字體尺寸，比最小尺寸瀏覽器（例如Chrome，offerce）小。如果您的網(wǎng)站的訪問者使用輔助技術(shù)增加字體大小，則這種方法也可能會遇到麻煩。

這可以通過將所有值縮放為100倍，然後應(yīng)用標(biāo)準(zhǔn)字體大小來解決這一點(diǎn)。但是，這需要與本文的方法一樣多的預(yù)處理，我認(rèn)為直接執(zhí)行這些計(jì)算而不是操縱字體大小是更優(yōu)雅的。

規(guī)模（）

比例（）函數(shù)可以更改整個(gè)對象的大小。該函數(shù)返回，可以將其送給樣式中的變換屬性?？傮w而言，這是一種強(qiáng)大的方法，但不會改變CSS設(shè)備的實(shí)際測量。我更喜歡我的方法，尤其是在使用設(shè)備“屏幕”上渲染的複雜UI元素時(shí)。

克里斯·科伊爾（Chris Coyier）使用這種方法準(zhǔn)備了一個(gè)示例。

綜上所述

如果從頭開始實(shí)現(xiàn)此庫，則數(shù)百個(gè)Calc（）調(diào)用可能不是我將要使用的第一個(gè)工具，但是總體而言，這是使現(xiàn)有庫可重新解析的有效方法。添加變量和媒體查詢使對象響應(yīng)。如果基礎(chǔ)庫進(jìn)行更新，則Python腳本將能夠?qū)⑦@些更改處理到我們響應(yīng)庫的新版本中。

以上是將固定尺寸的對像變成響應(yīng)元素的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！