在前端网页设计中，有时候需要将某个元素固定在页面的指定位置，并且随着浏览器窗口大小的变化而进行缩放。本文将介绍如何使用JavaScript和CSS来实现这一功能。
固定DIV
要固定一个DIV，可以使用CSS中的position属性。position有以下四个值：
- static（默认）——元素按照正常文档流排列。
- relative——元素基于自身位置进行定位。
- absolute——元素基于最近的已定位祖先元素进行定位。
- fixed——元素基于浏览器窗口进行定位。
因此，要使一个DIV固定在页面上，可以设置其position属性为fixed，并指定top、left、right或bottom的值。例如，以下代码将把一个DIV固定在屏幕上方，并距离屏幕左侧100px：
--- - --------- ------ ---- -- ----- ------ -
缩放文本
要使文本随着浏览器窗口大小的变化而进行缩放，可以使用CSS中的font-size属性。该属性定义字体大小，通常以像素为单位。例如，以下代码将文本字体大小设置为16像素：
--- - ---------- ----- -
对于固定在页面上的元素，可以使用JavaScript动态地修改font-size属性。首先，需要为该元素添加一个唯一的ID或类名，以便在JavaScript中引用该元素。例如，以下代码将为一个固定的DIV添加一个ID：
---- ---------------- ------------
然后，可以使用JavaScript获取该DIV的引用，并设置其font-size属性。
--- ----- - --------------------------------- -------------------- - -------
为了使文本随着浏览器窗口大小的变化而进行缩放，可以在window对象的resize事件中设置文本字体大小。resize事件在浏览器窗口大小改变时触发。以下代码演示了如何在resize事件中缩放文本。
--------------------------------- ---------- - --- ----- - ------------------ --- -------- - -------------- - --- ---- -------------------- - -------- - ----- ---
上述代码中，通过计算窗口宽度来确定字体大小。其中，Math.min函数用于确保字体大小不超过50像素，同时也确保字体大小不小于10像素。
示例代码
以下是一个完整的示例代码，演示如何使用JavaScript缩放文本来固定DIV。在该示例中，一个DIV被固定在屏幕顶部，并在resize事件中缩放文本。
--------- -----
------
------
----- ----------------
-------------------------
-------
------ -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- -----
------ ------
----------- -------
-
--------
-------
------
---- ---------------- ------------
--------
--- ----- - ---------------------------------
-------------------- - -------
--------------------------------- ---------- -
--- ----- - ------------------
--- -------- - -------------- - --- ----
-------------------- - -------- - -----
---
---------
-------
-------结论
通过使用CSS的position属性和JavaScript的font-size属性，可以实现一个固定在屏幕上方的DIV，并随着浏览器窗口大小的变化而进行文
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15308