1.viewport視口
視口（viewport），是視圖視窗的簡稱，
視口的大小就是HTML元素的實際大小，
但是，在移動端要想展示實際頁面大小則必須進行視口的適配設定，
否則，移動端加載頁面時，默認視口寬度980px或某個值（布局視口寬度），無法呈現實際大小，
說明：
在桌面顯示幕上CSS中的1px相當于1個物理像素，但在移動螢屏上由于設備解析度差異較大，
可能相同尺寸螢屏的解析度（像素密度）相差1倍甚至更多，這時CSS中的1px對應的的物理像素
數量會因設備不同而不同，所以移動端瀏覽器必須進行viewport適配，才能得到理想的布局效果，
獲取布局視口（layout viewport）寬度：
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”
語法示例：
<meta name="viewport" content="initial-scale=1.0,width=device-width,其他可選設定"/>
注意：
通常，單獨設定“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屬性，設定字體之間的距離
測驗結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/285902.html
標籤：HTML5
上一篇：配置好了tomcat服務器和掛載服務器，但是訪問本地檔案時報4040
下一篇：簡易流程圖設計器Vue3