CSS之基于视窗单位的排版
生活随笔
收集整理的這篇文章主要介紹了
CSS之基于视窗单位的排版
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.使用視窗單位進行排版
這里還有一個為什么要考慮使用視窗單位進行排版的原因 - 根據客戶端的瀏覽器，視窗單位會自動重新計算。這就意味著我們不需要顯式聲明媒體查詢的字體大小
實例1：讓我們用一個例子清楚地說明這一點
考慮下面的代碼，我在800px處將font-size的大小由16px 更改為 20px
當你看著這段代碼時，你可以在800px視窗時，立馬告訴font-size將大小由16px更改為20px。這是我們為了良好的視覺效果經常做的事情
但是，偶爾你也會遇到這種情況，在兩個斷點處你不得不額外增加一個媒體查詢以便在不同的設備上，排版依舊保持良好
但是不指定多個媒體查詢或者多個字體大小，你如何在不同情況下擁有相同效果呢?
這時候視窗單位就要發揮它的作用了，在視窗單位中設置font-size屬性，你就可以很容易的獲取一樣的效果
不過，正如你可以看到的，視窗單位太適應屏幕大小的改變。如果你也將字體大小設置為3vw,在一個屏幕寬度為320px的設備(移動)上，你得到的文本大小將為10px。這時字體過小而不適合閱讀。另一方面，在一個屏幕寬度為1440px的設備(筆記本電腦)上，你得到的字體大小將為43px，這時，字體又太大了
值得慶幸的是，這里有一個簡單的方法可以實現。我們可以設置一個最小的字體大小，然后在一個小視窗中通過多次使用calc()屬性縮放字體
2.calc的問題
我嘗試做的第一件事就是創建一個字體大小為 body 文本大小兩倍的<h1>元素。結果證實并不可以直接這么做，請看下面的實例
比方說你現在的視窗大小為800px。默認的font-size大小為16px
- 在<html>中112.5%計算出的font-size大小為18px(112.5/100 * 16px)
- 0.25vw計算出的值相等于2px(800px * 0.25 ÷ 100)\
- <html>中計算的font-size大小為20px (18px + 2px)
到目前為止HTML計算是不是很好？太棒了！
我們將采用同樣的方式來解決<h1>的計算。這一次要特別注意112.5%的計算
- <h1>中112.5%計算出來相當于22.5px的font-size大小(112.5/100 * 20px)
- 0.25vw相當于2px(800px * 0.25 ÷ 100)
- <h1>的font-size大小為49px((22.5px + 2px) * 2)
不幸的是，我們要尋找的正確的
大小為body的font-size大小的兩倍或者說是40px，所以該怎么辦呢？？
3.精度公式解決問題
有什么辦法可以結合calc實現具體的功能呢？
還有一個更大的我不得不克服的問題。就是我之前曾經提出的一個疑問:”在視窗大小為800px的情況下你如何計算vw，使排版的單位大小為20px？”
讓我們說說你想要的結果…
- 當視窗大小為600px時，font-size大小為18px
- 當視窗大小為1000px時，font-size大小為22px
我們這里給出一個公式：
首先確定最小的屏幕600px的時候對應16*1.125=18px的字體，然后600px對應18px字體—-1000px對應22px字體，這就很明顯改變100px屏幕寬度字體會改變1px，所以很顯然(100vw-600px)是結果多少px就對應改變百分之多少px的字體值，所以可以最終得出結論：（100vw-600px）/100的結果值就是所改變的那幾個px的字體值，再加上之前的18px基礎值就可以了。
總結
以上是生活随笔為你收集整理的CSS之基于视窗单位的排版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql字符集说明
- 下一篇： CSS实现垂直居中的5种方法