div自适应宽度的问题，求高手帮忙！_html/css_WEB-ITnose
在左侧做了一个可以自动伸缩的菜单栏，想让菜单栏展开时，完全展开右面带地图的div，而不是被左面的菜单遮住一部分，该怎么解决？
这是菜单展开的图：搜索
这是菜单隐藏的图：
这是body:
这是样式表：
#common_box{
width:280px;
height :100%;
position:fixed;
left:0;
top:40px;
border:1px solid #789;
background:#fff;
z-index:99
}
#cli_on{
width:10px;
height:100%;
float:right;
cursor:pointer;
background:#ccc;
text-align:center;
line-height:180px;
font-size:24px;
color:#f00;
}
.mydiv
{
position:fixed;
top:40px;
left:0px;
width: 100%;
height:650px;
}
这是伸缩菜单的js：
<script> <br /> //左侧弹出菜单 <br /> window.onload = function () { <br /> var common_box = document.getElementById("common_box"); <br /> var cli_on = document.getElementById("cli_on"); <br /> var flag = true, r_len = 0, timer = null; <br /> cli_on.onclick = function () { <br /> if (flag) { <br /> r_len = 0; <br /> timer = setInterval(slideright, 10); <br /> <br /> } else { <br /> r_len = -270; <br /> timer = setInterval(slideleft, 10); <br /> } <br /> } <br /> function slideright() { <br /> if (r_len <= -270) { <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> clearInterval(timer); <br /> return false; <br /> <br /> } else { <br /> r_len -= 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> function slideleft() { <br /> <br /> if (r_len >= 0) { <br /> clearInterval(timer); <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> return false; <br /> } else { <br /> r_len += 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> <br /> } <br /> </script>
就是想改成像这个网站论坛首页左面菜单栏的那种感觉。
回复讨论(解决方案)
你这个页面的布局不对啊，你看你使用的是position:fixed。在控制显示位置的，这个很明显的，就会出现覆盖这个问题了。
这个你可以这么处理：
左侧的那块，使用定位处理，而右侧的那块，不使用定位，但是使用一个margin-left来控制左侧空出来的距离
当你左侧的更改时，同时改变右侧的那个margin-left的值就行了。
我这么说，能想明白吗？
mydiv{ margin-top:40px; background-color:#eee; height:650px; margin-left:280px;}window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli var flag = true, r_len = 0, timer = null; cli_on.onclick = function () { if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= -270) { flag = !flag; cli_on.innerHTML = ""; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; cli_on.innerHTML = ""; return false; } else { r_len += 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}在你的基础上，稍微改了一点。试试是你要的效果吗？没有测兼容性。
不过，一些效果的话，html部分的布局也是很重要的，先想好布局，之后的js和css写起来，才会更简单的。
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#common_box{ width:15%; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99; float:left; padding:0; } #cli_on{ width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px; float: right; padding:0; }</style><script type="text/javascript"> //左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null; var mapDiv_width = mapDiv.clientWidth; var common_box_width = common_box.clientWidth; var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () { if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10); } else { r_len = 0; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } function slideleft() { if (r_len >= common_box_width) { clearInterval(timer); flag = !flag; common_box.style.width = common_box.clientWidth + "px"; mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; return false; } else { r_len += 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#common_box{ width:15%; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99; float:left; padding:0; } #cli_on{ width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px; float: right; padding:0; }</style><script type="text/javascript"> //左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null; var mapDiv_width = mapDiv.clientWidth; var common_box_width = common_box.clientWidth; var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () { if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10); } else { r_len = 0; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } function slideleft() { if (r_len >= common_box_width) { clearInterval(timer); flag = !flag; common_box.style.width = common_box.clientWidth + "px"; mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; return false; } else { r_len += 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#common_box{ width:15%; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99; float:left; padding:0; } #cli_on{ width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px; float: right; padding:0; }</style><script type="text/javascript"> //左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null; var mapDiv_width = mapDiv.clientWidth; var common_box_width = common_box.clientWidth; var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () { if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10); } else { r_len = 0; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } function slideleft() { if (r_len >= common_box_width) { clearInterval(timer); flag = !flag; common_box.style.width = common_box.clientWidth + "px"; mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; return false; } else { r_len += 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充
我写的效果就是需要手动重绘地图的，你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码，这样地图才能自动适应画面变化。
mydiv{ margin-top:40px; background-color:#eee; height:650px; margin-left:280px;}window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli var flag = true, r_len = 0, timer = null; cli_on.onclick = function () { if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= -270) { flag = !flag; cli_on.innerHTML = ""; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; cli_on.innerHTML = ""; return false; } else { r_len += 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}在你的基础上，稍微改了一点。试试是你要的效果吗？没有测兼容性。
不过，一些效果的话，html部分的布局也是很重要的，先想好布局，之后的js和css写起来，才会更简单的。
试了一下，效果实现了！是不是用position:fixed;直接固定位置挺不好的？
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#common_box{ width:15%; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99; float:left; padding:0; } #cli_on{ width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px; float: right; padding:0; }</style><script type="text/javascript"> //左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null; var mapDiv_width = mapDiv.clientWidth; var common_box_width = common_box.clientWidth; var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () { if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10); } else { r_len = 0; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } function slideleft() { if (r_len >= common_box_width) { clearInterval(timer); flag = !flag; common_box.style.width = common_box.clientWidth + "px"; mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; return false; } else { r_len += 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充
我写的效果就是需要手动重绘地图的，你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码，这样地图才能自动适应画面变化。
地图这个只在mapDiv里加载，想要完全加载只能靠改变div的宽度来实现了
定位浮动什么的，我会觉得，能少用，就尽量少用，如果用的太多，以后添加功能，更改样式时，都会变得更难。
当然，有时候也不得不用，只要不是把所有的布局，都用float，position这样就好了。
也算是个人习惯。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1389
52
So konfigurieren Sie die inhaltsadaptive Helligkeit unter Windows 11
Apr 14, 2023 pm 12:37 PM
Adaptive Helligkeit ist eine Funktion auf Windows 11-Computern, die die Helligkeit Ihres Bildschirms basierend auf dem angezeigten Inhalt oder den Lichtverhältnissen anpasst. Da sich einige Benutzer noch an die neue Benutzeroberfläche von Windows 11 gewöhnen müssen, ist Adaptive Brightness nicht leicht zu finden, und einige sagen sogar, dass die Adaptive Brightness-Funktion in Windows 11 fehlt, daher wird dieses Tutorial alles klären. Wenn Sie beispielsweise ein YouTube-Video ansehen und das Video plötzlich eine dunkle Szene zeigt, wird der Bildschirm durch die adaptive Helligkeit heller und der Kontrast erhöht. Dies unterscheidet sich von der automatischen Helligkeit, einer Bildschirmeinstellung, die es Ihrem Computer, Smartphone oder Gerät ermöglicht, die Helligkeitsstufen basierend auf der Umgebungsbeleuchtung anzupassen. Eine Besonderheit gibt es in der Frontkamera
Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt
Jan 30, 2023 am 09:23 AM
CSS-Methode, um zu erkennen, dass einem Div eine Ecke fehlt: 1. Erstellen Sie eine HTML-Beispieldatei und definieren Sie ein Div. 2. Legen Sie die Hintergrundfarbe für die Breite und Höhe des Div fest. 3. Fügen Sie dem zu löschenden Div eine Pseudoklasse hinzu eine Ecke und setzen Sie die Pseudoklasse auf „Die gleiche Farbe wie die Hintergrundfarbe verwenden“, drehen Sie sie dann um 45 Grad und positionieren Sie sie dann an der Ecke, die entfernt werden muss.
Wie erstellt man mit Vue eine adaptive mobile Schnittstelle?
Jun 27, 2023 am 11:05 AM
Mit der Popularität des mobilen Internets müssen immer mehr Websites und Anwendungen das mobile Erlebnis berücksichtigen. Als beliebtes Front-End-Framework verfügt Vue über ein reaktionsfähiges Layout und adaptive Funktionen, die uns beim Aufbau adaptiver mobiler Schnittstellen helfen können. In diesem Artikel wird erläutert, wie Sie mit Vue eine adaptive mobile Schnittstelle erstellen. Die Verwendung von rem anstelle von px als Einheit und die Verwendung von px als Einheit in der mobilen Benutzeroberfläche kann zu inkonsistenten Anzeigeeffekten auf verschiedenen Geräten führen. Daher empfiehlt es sich, als Einheit rem statt px zu verwenden. rem ist relativ
So implementieren Sie die adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vw
Sep 13, 2023 am 08:18 AM
So verwenden Sie die CSSViewport-Einheiten vmin und vw, um die adaptive Bildgröße zu implementieren. Im Webdesign stoßen wir häufig auf Situationen, in denen Bilder an die Bildschirmgröße angepasst werden müssen. Um dieses Ziel zu erreichen, stellt CSS eine leistungsstarke Einheit bereit – die Viewport-Einheit. Dabei repräsentiert vmin den Prozentsatz der kleineren Seite der Breite des Ansichtsfensters und vw den Prozentsatz der Breite des Ansichtsfensters. Daher können wir diese beiden Einheiten verwenden, um den Effekt der adaptiven Bildgröße zu erzielen. Die Einzelheiten werden im Folgenden vorgestellt
Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API
May 01, 2023 pm 03:28 PM
Vorwort Seit Kurzem gibt es auf GitHub ein Browser-Skript, das neben der Browser-Plugin auch Polier- und Zusammenfassungsfunktionen unterstützt -ins, es verwendet auch Tauri-Paketierung, abgesehen von der Tatsache, dass Tauri den Rust-Teil verwendet, ist der Browser-Teil immer noch relativ einfach zu implementieren. Heute werden wir ihn manuell implementieren. Über die von openAI bereitgestellte Schnittstelle können wir beispielsweise den folgenden Code kopieren und in der Browserkonsole eine Anfrage initiieren, um die Übersetzung abzuschließen //Beispiel constOPENAI_API_KEY="s
Was ist das Div-Box-Modell?
Oct 09, 2023 pm 05:15 PM
Das div-Box-Modell ist ein Modell, das für das Webseiten-Layout verwendet wird. Es behandelt Elemente auf einer Webseite als rechteckige Boxen. Dieses Modell enthält vier Teile: Inhaltsbereich, Innenabstand, Rand und Rand. Der Vorteil des Div-Box-Modells besteht darin, dass es das Layout der Webseite und den Abstand zwischen Elementen leicht steuern kann. Durch Anpassen der Größe des Inhaltsbereichs, des Innenrands, des Rands und des Außenrands können verschiedene Layouteffekte erzielt werden Das Box-Modell bietet außerdem einige Eigenschaften und Methoden, mit denen der Stil und das Verhalten der Box über CSS und JavaScript dynamisch geändert werden können.
Was ist der Unterschied zwischen iframe und div?
Aug 28, 2023 am 11:46 AM
Der Unterschied zwischen iframe und div besteht darin, dass iframe hauptsächlich zum Einführen externer Inhalte verwendet wird, die Inhalte von anderen Websites laden oder eine Webseite in mehrere Bereiche unterteilen können. Jeder Bereich verfügt über einen eigenen unabhängigen Browsing-Kontext, während div hauptsächlich zum Unterteilen von und verwendet wird Organisieren Sie den Inhaltsblock zur Layout- und Stilkontrolle.
Kann Vue anpassungsfähig sein?
Dec 30, 2022 pm 03:25 PM
Vue kann eine Selbstanpassung erreichen: 1. Installieren Sie die Komponente „scale-box“ über den Befehl „npm install“ oder „yarn add“ und verwenden Sie „scale-box“, um eine adaptive Skalierung zu erreichen ; 2. Stellen Sie das Pixelverhältnis des Geräts ein, um eine Selbstanpassung zu erreichen. 3. Stellen Sie das Zoomattribut über JS ein, um das Zoomverhältnis anzupassen, um eine Selbstanpassung zu erreichen.
