WEB前端第六十九课——viewport、rem单位

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”则是为了方便计算。

　　代码示例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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.响应式表格案例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<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属性，设置字体之间的距离

　　测试结果：

　　

posted @   后来喵  阅读(424)  评论(0)  编辑  收藏  举报
编辑推荐：
· 理解Rust引用及其生命周期标识（下）
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
阅读排行：
· C# 13 中的新增功能实操
· Ollama本地部署大模型总结
· 2025成都.NET开发者Connect圆满结束
· langchain0.3教程：从0到1打造一个智能聊天机器人
· 用一种新的分类方法梳理设计模式的脉络
点击右上角即可分享
微信分享提示
AI原生IDE