如何使用更新的特性進(jìn)行響應(yīng)式設(shè)計

這篇文章主要介紹“如何使用更新的特性進(jìn)行響應(yīng)式設(shè)計”，在日常操作中，相信很多人在如何使用更新的特性進(jìn)行響應(yīng)式設(shè)計問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用更新的特性進(jìn)行響應(yīng)式設(shè)計”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

真正的響應(yīng)圖像

對于圖片，我們經(jīng)常使用 width: 100%  來適配圖片，這種方法是挺有效的，但是對于較大的屏幕，如果圖片像素不夠高則會讓圖像看起來有些糊涂，同時這種方法也有一些缺點(diǎn)，其中比較值得注意的是：

• 圖像可能會變形到失去焦點(diǎn)的程度。

• 屏幕較小的設(shè)備也要下載在大屏幕展現(xiàn)的大尺寸圖片。

在網(wǎng)頁上使用圖像時，我們必須確保它們在分辨率和大小方面得到了優(yōu)化。原因是為了確保我們有適合正確設(shè)備的正確圖像分辨率，因此我們最終不會為較小的屏幕下載尺寸過大的圖像，而這最終可能會降低網(wǎng)站的性能  ??。

簡而言之，我們需要將較大的高分辨率圖像發(fā)送到較大的屏幕，而將較小的低分辨率版本發(fā)送到較小的屏幕，從而改善性能和用戶體驗(yàn) ??。

HTML提供了<picture>元素，該元素可以根據(jù)所添加的媒體查詢來指定要渲染的確切圖像資源。如前所述，我們沒有將一個圖像(通常是較大的高分辨率版本)發(fā)送到所有屏幕尺寸并將其縮放到視口寬度，而是指定了一組圖像以在特定情況下使用。

<picture>   <source media="(max-width:1000px)" srcset="picture-lg.png">   <source media="(max-width:600px)" srcset="picture-mid.png">   <source media="(max-width:400px)" srcset="picture-sm.png">   <img src="picture.png" alt="picture""> </picture>

在此示例中，picture.png是最大尺寸圖像。除了這個之外，我們定義圖像的第二大版本picture-lg.png，并且大小按降序減小，直到最小的版本picture-sm.png。注意，我們?nèi)砸赃@種方式使用媒體查詢，但是元素本身驅(qū)動了響應(yīng)行為，而不是在CSS中定義了斷點(diǎn)  ??。

媒體查詢會根據(jù)圖片的大小適當(dāng)?shù)靥砑?

• 大于等于1000px的視口加載picture.png

• 601px到999px之間的視口加載image-lg.png

• 介于401px和600px之間的視口加載picture-mid.png

• 小于400px的會加載image-sm.png

有趣的是，我們還可以在URL后面通過圖像密度1x, 2x,  3x等等來標(biāo)記每個圖像。如果我們按比例制作不同的圖片，這種方法就能奏效。這允許瀏覽器根據(jù)屏幕的像素密度和視口大小來決定下載哪個版本。但是請注意我們最終定義了多少圖像:

<picture>   <source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x">   <source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x">   <source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x">   <img src="picture.png" alt="picture""> </picture>

接下來，我們來專門看一下嵌套在<picture>元素內(nèi)的兩個標(biāo)簽：<source>和<img>。

瀏覽器查找媒體查詢與當(dāng)前視口寬度匹配的第一個<source>元素，然后它將顯示適當(dāng)?shù)膱D像(在srcset屬性中指定)。<img>元素作為<picture>元素的最后一個子元素是必需的，如果沒有一個source標(biāo)簽與之匹配，則作為一個回退選項。

我們還可以使用srcset屬性使用圖像密度來處理僅使用元素來處理響應(yīng)圖像：

<img  srcset="   flower4x.png 4x,   flower3x.png 3x,   flower2x.png 2x,   flower1x.png 1x  "  src="flower-fallback.jpg" >

我們可以做的另一件事是根據(jù)設(shè)備本身的屏幕分辨率(通常以每英寸的點(diǎn)或dpi來衡量)在CSS中編寫媒體查詢，而不僅僅是設(shè)備視口。這意味著不是下面這種寫法

@media only screen and (max-width: 600px) {   /* Style stuff */ }

而是

@media only screen and (min-resolution: 192dpi) {   /* Style stuff */ }

這種方法允許我們根據(jù)設(shè)備本身的屏幕分辨率來決定渲染什么圖像，這在處理高分辨率圖像時很有幫助?；旧希@意味著我們可以為支持高分辨率和低分辨率的小版本的屏幕顯示高質(zhì)量的圖片。

值得注意的是，盡管移動設(shè)備的屏幕較小，但通常分辨率較高，這也說明了僅依靠分辨率可能不是一種好的做法。它可能會導(dǎo)致將高分辨率的大圖像提供給非常小的屏幕，這是我們不希望看到的。

body {   background-image : picture-md.png; /* the default image */ }   @media only screen and (min-resolution: 192dpi) {   body {     background-image : picture-lg.png; /* higher resolution */   } }

<picture>給予了強(qiáng)大的圖片響應(yīng)能力，為了與這個想法保持一致，我們可以利用CSS功能，例如object-fit屬性，當(dāng)與object-position一起使用時，它可以裁剪圖像以獲得更好的焦點(diǎn)，同時保持圖像的長寬比。

因此，要更改圖像的焦點(diǎn)：

@media only screen and (min-resolution: 192dpi) {   body {     background-image : picture-lg.png;     object-fit: cover;     object-position: 100% 150%; /* moves focus toward the middle-right */   } }

在CSS中設(shè)置最小值和最大值

min()函數(shù)指定元素可以縮小到的絕對最小大小。幫助文本大小在不同的屏幕大小上正確縮放方面，該功能非常有用，例如從不讓流暢的字體大小降低到清晰的字體大小以下：

html {   font-size: min(1rem, 22px); /* Stays between 16px and 22px */ }

min()接受兩個值，它們可以是相對，百分比或固定單位。在此示例中，我們告訴瀏覽器永遠(yuǎn)不要讓.box類的元素的寬度減小到45%或600px以下(以視口寬度為準(zhǔn)，以最小者為準(zhǔn))：

.box {   width : min(45%, 600px) }

如果45%計算得出的值小于600px，則瀏覽器將使用45%作為寬度。相反，如果45%計算得出的值大于600px，則將使用600px作為元素的寬度。

max()函數(shù)也有類似的情況。它也接受兩個值，但是我們沒有定義元素的最小尺寸，而是定義了它可以獲取的最大尺寸。

.box {   width : max(60%, 600px) }

如果60%計算得出的值大于600px，則瀏覽器將使用60%作為寬度。相反，如果60%的值小于600px，則將使用600px作為元素的寬度

限定值

clamp() 函數(shù)的作用是把一個值限制在一個上限和下限之間，當(dāng)這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用。它接收三個參數(shù)：最小值、首選值、最大值。clamp() 被用在 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> 中都是被允許的。

clamp(MIN, VAL, MAX) 其實(shí)就是表示 max(MIN, min(VAL, MAX))，例如：

.box {   font-size : clamp(1rem, 40px, 4rem) }

瀏覽器會將字體設(shè)置為1rem，直到1rem的計算值大于40px。而當(dāng)計算值大于40px時?是的，瀏覽器在達(dá)到4rem后將停止增加大小。

使用響應(yīng)單位

你是否曾經(jīng)建立過一個帶有大標(biāo)題或副標(biāo)題的頁面，并且在 PC  屏幕上的顯示效果良好，但在移動設(shè)備上卻發(fā)現(xiàn)它太大了?我猜肯定會遇到這種情況，在本節(jié)中，我們將介紹如何處理此類問題。

在CSS中，你可以使用各種度量單位來確定元素的大小或長度，最常用的度量單位包括：px，em，rem，%，vw``和vh。雖然，還有一些不常用的單位。我們感興趣的是px可以視為絕對單位，而其余的則可以視為相對單位。

絕對單位

像素(px)被視為絕對單位，主要是因?yàn)橄袼厥枪潭ǖ?，并且不會因其他任何元素的測量而變化?？梢詫⑵湟暈槠渌恍┫鄬挝皇褂玫幕締挝换蚋鶈挝?。將像素用于響應(yīng)行為可能會遇到問題，因?yàn)樗枪潭ǖ模侨绻阌型耆粦?yīng)調(diào)整大小的元素，那么像素就很棒。

1

相對單位

相對單位(例如%，em和rem)更適合于響應(yīng)式設(shè)計，這主要是因?yàn)樗鼈兙哂锌绮煌聊怀叽缈s放的能力。

• vw：相對于視口的寬度

• vh：相對于視口的高度

• rem:相對于根元素()(默認(rèn)字體大小通常為16px)

• em:相對于父元素

• %：相對于父元素

同樣，大多數(shù)瀏覽器的默認(rèn)字體大小為16px，這是rem單位用來生成其計算值的字體。因此，如果用戶在瀏覽器上調(diào)整字體大小，則頁面上的所有內(nèi)容都將根據(jù)根大小正確縮放。例如，當(dāng)處理根集為16px時，我們指定的數(shù)字將乘以該數(shù)字乘以默認(rèn)大小。例如：

.8rem = 12.8px (.8 * 16) 1rem = 16px (1 * 16) 2rem = 32px (2 * 16)

如果想更改默認(rèn)大小怎么辦?正如前面所介紹，這些是相對單位，最終尺寸值將基于新的基值。這在媒體查詢中就非常有用，我們只需更改字體大小，然后整個頁面就會相應(yīng)地放大或縮小。

例如，如果你在CSS中將font-size更改為10px，則計算出的尺寸最終將是：

html {   font-size : 10px; } 1rem = 10px (1 * 10) 2rem = 20px (2 * 10) .5rem = 5px (.5 * 10)

注意:這也適用于百分比1%,例如

100% = 16px; 200% = 32px;  50% = 8px;

rem和em單位有什么區(qū)別?

rem使用根（<html>）元素的字體大小計算值，而聲明em值的元素引用包含它的父元素的字體大小。如果指定的父元素的大小與根元素的大小不同（例如，父元素為18px，但根元素為16px），則em和rem將解析為不同的計算值。這使我們可以更細(xì)粒度地控制元素在不同響應(yīng)上下文中的響應(yīng)方式。

vh是視口高度或可見屏幕高度的首字母縮寫。100vh代表視口高度的100%(取決于設(shè)備)。同樣，vw代表視口寬度，這意味著設(shè)備的可視屏幕寬度，而100vw則代表視口寬度的100%。

超越媒體查詢

以上，我們只研究了許多真正強(qiáng)大且相對較新的HTML和CSS功能，這些功能為我們提供了更多(可能更有效)的響應(yīng)方式構(gòu)建方法。這些新的東西并不是取代我們一直以來所做的事情。它們只是為開發(fā)人員帶來更多的可選性，可讓我們更好地控制確定元素在不同上下文中的行為。無論是使用字體大小，分辨率，寬度，焦點(diǎn)還是其他任何東西，我們對用戶體驗(yàn)的控制都比以往任何時候都要精細(xì)。

到此，關(guān)于“如何使用更新的特性進(jìn)行響應(yīng)式設(shè)計”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！