了解只使用1個css屬性來創(chuàng)建響應式網(wǎng)站的示例?這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)絡空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設計、克東網(wǎng)站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
以這個模板為例,沒有應用css屬性。
使用 clamp()
CSS函數(shù),我們可以創(chuàng)建僅具有一個屬性的響應式網(wǎng)站。
現(xiàn)在添加魔術(shù)CSS
clamp(minimum, preferred, maximum);
在這里!你已經(jīng)完成了
clamp()
的工作原理是“夾緊”或限制一個靈活的值,使其處于最小和最大范圍之間。
使用方法如下:
16px
5vw
34px
h2 { font-size: clamp(16px, 5vw, 34px); }
在此示例中,僅當該值大于 16px
且小于 34px
時,h2
字體大小值將為視口寬度的 5%
。
例如,如果你的視口寬度是 300px
,你的 5vw
值將等于 15px
,但是,你將該字體大小值限制為最小 16px
,因此這就是將要發(fā)生的情況。
另一方面,如果你的視口寬度為 1400px
,則 5vw
將高達 70px
!但幸運的是,你將該最大值限制為 34px
,因此它不會超過該值。
在線Demo:https://dip15739.github.io/ResponsiveWebsite-CSSproperty/
我可以為此模板添加此代碼...
img { width: clamp(15vw, 800%, 100%); } h2 { font-size: clamp(20px, 5vw, 35px); } p { font-size: clamp(10px, 4vw, 20px); }
而從字面上看,接受任何其他長度、頻率、角度、時間、百分比、數(shù)字或整數(shù)的屬性。
感謝各位的閱讀!看完上述內(nèi)容,你們對只使用1個css屬性來創(chuàng)建響應式網(wǎng)站的示例大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站名稱:只使用1個css屬性來創(chuàng)建響應式網(wǎng)站的示例
轉(zhuǎn)載來于:http://www.muchs.cn/article30/jsooso.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供ChatGPT、用戶體驗、網(wǎng)站策劃、網(wǎng)頁設計公司、網(wǎng)站建設、動態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)