WEB前端第六十九課——viewport、rem單位

時間 2021-08-12

標籤 html 瀏覽器 ide 佈局測試字體 idea spa scala 欄目 HTML 简体版

原文原文鏈接

1.viewport視口html

　　視口（viewport），是視圖窗口的簡稱。瀏覽器

　　視口的大小就是HTML元素的實際大小。ide

　　可是，在移動端要想展現實際頁面大小則必須進行視口的適配設置，佈局

　　不然，移動端加載頁面時，默認視口寬度980px或某個值（佈局視口寬度），沒法呈現實際大小。測試

　　說明：字體

　　　　在桌面顯示器上CSS中的1px至關於1個物理像素，但在移動屏幕上因爲設備分辨率差別較大，ui

　　　　可能相同尺寸屏幕的分辨率（像素密度）相差1倍甚至更多，這時CSS中的1px對應的的物理像素idea

　　　　數量會因設備不一樣而不一樣，因此移動端瀏覽器必須進行viewport適配，才能獲得理想的佈局效果。spa

　　　　獲取佈局視口（layout viewport）寬度：scala

　　　　　　document.documentElement.clientWidth

2.視口適配

　　使用<meta/>標籤控制viewport進行適配設置，獲得理想視口寬度（ideal viewport）。

　　<meta>元素能夠提供關於HTML元素的元數據信息，好比頁面描述、搜索關鍵字、訪問頻率等。

　　<meta>元素屬性：

　　　　content，設置或返回<meta>元素的content屬性的值；

　　　　name，將content屬性鏈接到某個元數據的名稱；

　　　　httpEquiv，將content屬性鏈接到某個HTTP頭部；

　　　　scheme，設置或返回用於解釋content屬性值的格式。

　　藉助<meta>標籤進行viewport設置時，name="viewport"，而 meta content的屬性值包含如下6個：

　　　　width，設置佈局視口（layout viewport）的寬度，值爲正整數或 device-width（設備屏幕寬度）

　　　　initial-scale，設置頁面初始縮放值，值爲「0.0-10.0」之間

　　　　minimum-scale，設置最小縮放比例，值爲「0.0-10.0」之間，必須小於等於 maximum-scale

　　　　maximum-scale，設置最大縮放比例，值爲「0.0-10.0」之間，必須大於等於 minimum-scale

　　　　height，設置佈局視口的高度，值爲正整數或 device-height，通常不須要單獨定義

　　　　user-scalable，設置是否容許用戶進行縮放操做，值爲 yes/no，默認爲「yes」

　　語法示例：

　　注意：

　　　　一般，單獨設置「initial-scale=1」或者「width=device-width」中的一個均可以獲得 ideal viewport，

　　　　可是，僅設置「width=device-width」時，在iPhone或iPad上，不管橫屏仍是豎屏，ideal viewport

　　　　都是豎屏時的寬度，而僅設置「initial-scale=1」時，在window phone的IE瀏覽器上，idealviewport

　　　　始終是豎屏時的寬度，當二者同時設置時，瀏覽器會取兩者的值較大的那一個。

3.REM單位

　　rem（font size of the root element）是相對於根元素的字體大小按比例進行計算的尺寸單位。

　　在響應式佈局中，考慮到不一樣移動端的尺寸差別，爲確保全部元素所佔空間在不一樣設備上比例相同，

　　頁面佈局須要動態調整，則經過REM對設備的物理像素和邏輯像素進行動態轉換達到佈局適配目的。

　　按照REM思想定義根元素字體大小時，語法以下：

　　　　document.documentElement.style.fontSize

　　　　=(document.documentElement.clientWidth/750)*100+"px";

　　　　說明：

　　　　　　⑴上述設置表示將設備寬度進行750等分，再乘以100，獲得根元素字體的像素大小。

　　　　　　　因此，在不一樣尺寸的設備上，根元素字體的大小也就不一樣，但與設備尺寸的比例是相同的。

　　　　　　⑵因爲大多數PS設計稿是以iPhone6爲標準進行設計的，iPhone6的邏輯像素是375px，而

　　　　　　　它的實際物理像素是滿屏寬度的2倍，也就是750px，PS設計軟件的分辨率和物理像素是

　　　　　　　是1:1的比例，因此爲了便於不一樣設備間按比例縮放轉換，將設備寬度進行750等分。

　　　　　　⑶爲了不使用rem單位設置元素大小時小於瀏覽器默認最小尺寸，如12px、14px等，

　　　　　　　因此將設備寬度750等分後，乘以一個放大係數，使用「100」則是爲了方便計算。

　　代碼示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>viewport&rem</title>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>

    <script>
            document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
    </script>
    <style>
        div{
            width: 6rem;height: 0.3rem;background-color: #1e7e34;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector('div');
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.style.fontSize);
        console.log(div.clientWidth);
        console.log(div.clientHeight);
    </script>
</body>
</html>

4.響應式表格案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>viewport&rem</title>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>

    <script>
        //頁面加載完成後計算「fontSize「值。
        window.onload=function(){
            document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
        }
        //爲確保視口尺寸改變後自動計算「fontSize」值，使用window.onresize事件。
        window.onresize=function () {
            document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
        }
    </script>
    <style>
        table{
            width: 6rem;height: 1rem;font-size: 0.08rem;
            border-collapse: collapse;  /* 設置單元格邊框摺疊，即相鄰單元格的邊框會合併爲單一邊框 */
        }
    </style>
</head>
<body>
    <table border="1px" cellspacing="0" align="center">
        <tr>
<!--    設置表名、單元格合併、字體大小、字體加粗、字體間距、表格背景顏色        -->
            <th colspan="7" style="font-size: 0.12rem;font-weight: normal;letter-spacing: 0.06rem" bgcolor="#fafad2">
                第十週課程表
            </th>
        </tr>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr align="center">
            <td>語文</td>
            <td>數學</td>
            <td>英語</td>
            <td>政治</td>
            <td>歷史</td>
            <td>體育</td>
            <td>美術</td>
        </tr>
        <tr align="center">
            <td>文學</td>
            <td>金融</td>
            <td>地裏</td>
            <td>財經</td>
            <td>生物</td>
            <td>音樂</td>
            <td>舞蹈</td>
        </tr>
    </table>
</body>
</html>

　　知識碎片：

　　　　window.onresize事件，視口尺寸發生變化時觸發

　　　　border-collapse屬性，設置相鄰單元格邊框是否合併

　　　　cellspacing屬性，設置單元格之間的距離

　　　　letter-spacing屬性，設置字符之間的距離

　　　　word-spacing屬性，設置字體之間的距離

　　測試結果：