如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计
生活随笔
收集整理的這篇文章主要介紹了
如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
除了使用媒體查詢和現代css布局(如flexbox和grid)來創建響應式網站外,我們還可以做好某些被忽視的事情來制作響應式網站。在本文中,我們將探討許多可用的工具(圍繞html和css),從響應圖像到相對較新的CSS函數,無論我們是否使用媒體查詢,它們都可以正常工作。事實上,媒體查詢與這些功能一起使用時,更多的是成為一種補充,而不是完整的方法。讓我們來看看是如何運作的。 例如:.box { font-size : clamp(1rem, 40px, 4rem)}瀏覽器會將字體設置為1rem,直到1rem的計算值大于40px。而當計算值大于40px時?是的,瀏覽器在達到4rem后將停止增加大小。你可以看到如何使用 clip() 來使元素變得流暢,而無需使用媒體查詢。
真正的響應式圖像
還記得當我們可以在圖片上寫死 width: 100% ,然后就可以下班了嗎?當然,這樣做還是有效果的,也確實能讓圖片變得更有彈性,但也會帶來一些弊端,其中最明顯的包括:圖像可能會變形到失去焦點的程度。
較小的設備仍會下載完整尺寸的圖像。
大于等于1000px的視口將獲得 picture.png。
介于601像素和999像素之間的視口將獲得 picture-lg.png。
介于401像素和600像素之間的視口將獲得 picture-sm.png。
任何小于400px的東西都會得到 picture-sm.png。
在CSS中設置minimum和maximum
min()?函數指定一個元素可以縮小到的絕對最小尺寸。這個函數在幫助文本大小在不同屏幕大小之間適當縮放方面非常有用,比如永遠不要讓流體類型下降到一個清晰的字體大小以下:html { font-size: min(1rem, 22px); /* Stays between 16px and 22px */}min() 接受兩個值,它們可以是相對、百分比或固定單位。在這個例子中,我們告訴瀏覽器永遠不要讓帶有 .box 類的元素寬度低于45%或600px,以視口寬度最小的為準。.box { width : min(45%, 600px)}如果45%計算得出的值小于600px,則瀏覽器將使用45%作為寬度。反之,如果45%的計算值大于600px,那么元素的寬度將使用600px。max() 函數也是同樣的道理,它也接受兩個值,但不是指定一個元素的最小尺寸,而是定義它的最大尺寸。.box { width : max(60%, 600px)}如果60%計算出的數值大于600px,瀏覽器就會使用60%作為寬度。反過來說,如果60%的計算值小于600px,那么將使用600px作為元素的寬度。鉗制(Clamping)值
我們中的許多人已經為clip()叫囂了一段時間,實際上我們在所有現代瀏覽器中都得到了廣泛的支持(對不起,IE)。clamp() 是 min() 和 max() 函數的組合,接受三個參數:最小值
首選值,以及
最大值
與響應單位合作
你是否曾經建立過一個大標題或小標題的頁面,并羨慕它在桌面屏幕上看起來有多好,但在移動設備上檢查時卻發現它太大了?我肯定會遇到這種情況,在本節中,我將解釋如何處理此類問題。在CSS中,你可以使用各種度量單位來確定元素的大小或長度,最常用的度量單位包括:px,em,rem,%,vw 和 vh。雖然,還有一些不常用的單位。我們感興趣的是,px 可以認為是一個絕對單位,而其余的則認為是相對單位。絕對單位
像素(px)被視為絕對單位,主要是因為像素是固定的,并且不會因其他任何元素的測量而變化。可以將其視為其他一些相對單位使用的基本單位或根單位。試圖使用像素來進行響應行為可能會碰到問題,因為它是固定的,但如果你有一些根本不應該調整大小的元素,它們是很好的。相對單位
相對單位,如 %、em 和 rem,更適合響應式設計,主要是因為它們能夠跨越不同的屏幕尺寸進行縮放。vw:相對于視口的寬度
vh:相對于視口的高度
rem:相對于根()元素(默認字體大小通常為16px)
em:相對于父元素
%:相對于父元素
超越媒體查詢
看到了嗎?我們剛剛看了一些非常強大且相對較新的 HTML 和 CSS 功能,它們為我們提供了額外的(可能更有效的)構建響應性的方法。這并不是說這些新技術取代了我們一直在做的事情。它們只是我們開發者工具帶中的更多工具,讓我們有更大的控制權來決定元素在不同上下文中的行為。無論是對字體大小、分辨率、寬度、焦點,還是任何事物的處理,我們對用戶體驗的控制都比以往更加精細。所以,下次當你發現自己在一個項目上工作時,你希望在特定設備上對設計的確切外觀和感覺有更多的控制,看看原生HTML和CSS能幫上什么忙——事情已經發展到令人難以置信的地步了。本文完~ 創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c++ hough变换代码_hough变
- 下一篇: python逆序数怎么求_怎么算逆序数?