如何将html网站设置为固定大小，以便在缩放时不会改变大小_Html_Css

如何将html网站设置为固定大小，以便在缩放时不会改变大小

html css

如何将html网站设置为固定大小，以便在缩放时不会改变大小,html,css,Html,Css,我制作网站只是为了好玩，我需要将其设置为固定大小，这样当你放大时，图像不会移动，信息也不会在页面上被压碎。尝试使用以下方法：在所有内容上使用px而不是百分比设置固定的高度和宽度应该使所有内容都固定 .css_name { height:30px; width:30px; } <body> <div class="css_name">lorus ipsum</div> 我使用的宽度和高度是%而不是px 在这张图片中，我得到了块px和In%（im

我制作网站只是为了好玩，我需要将其设置为固定大小，这样当你放大时，图像不会移动，信息也不会在页面上被压碎。

尝试使用以下方法：

在所有内容上使用px而不是百分比设置固定的高度和宽度应该使所有内容都固定

.css_name {
  height:30px;
  width:30px;
}

<body>
  <div class="css_name">lorus ipsum</div>

我使用的宽度和高度是%而不是px
在这张图片中，我得到了块px和In%（imgs和文本我得到了块px）

在所有img、文本、块上使用%，但有时使用%会带来痛苦
我的代码示例

#leftbody {
    position: relative;
    background-color:#e6f5ff;
    width:14%;
    display: inline-block;
    z-index:0;
    height:100%;
    float:left;
    padding:0%;
}
#rightbody {
    position: relative;
    background-color: none;
    width:84%;
    display: inline-block;
    z-index:0;
    height:100%;
    float:righht;
    padding:0%;
}   
.activebuttons2 {
            border: none;
            color: white;
            width:100%;
            padding: 10 0 10 0px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
}

在其他条件相同的情况下，缩放不会影响布局

zoom所做的是更改有效的浏览器窗口分辨率。例如，如果您的窗口当前为1024 x 800，并且您将其缩小到200%，则窗口将变为512 x 400（您可以通过在控制台中检查

window.innerHeight

来测试这一点）。如果您有媒体查询，或正在收听调整大小事件，它们将被触发，就像用户调整其浏览器窗口的大小一样。当然，根据结果，布局可能会改变，可能会以不希望的方式改变

换言之，将1024 x 800浏览器窗口缩放到200%时，除了将浏览器窗口实际调整为512 x 400时所看到的布局更改外，不会导致其他布局更改

即使可以检测到缩放级别，从用户体验的角度来看，也不应干扰或覆盖用户的缩放选择

话虽如此，有多种方法可以尝试检测缩放级别，例如

window.devicePixelRatio

。然而，没有办法捕捉到这一点。如果搜索“检测浏览器缩放”，您可以找到其他方法。然而，这是一个滑坡。你最好设计你的应用程序，让它在不同的分辨率下运行良好，然后让用户随心所欲地缩放

请注意，

window.screen

报告不受缩放影响的物理屏幕尺寸。因此

window.screen.height

始终是屏幕的物理高度（而不是浏览器窗口）。无论如何，您不可能对这些信息做任何有用的事情。

放大不会改变布局或“挤压”任何东西。它只是让一切变得更大。无论如何，即使可以，也不应该阻止缩放。这是用户的选择。为什么你想阻止视力差的人放大，这样他们就可以看到你的网站？那么我怎么能让所有东西都保持不变，但在放大时能够放大和滚动？现在，当我缩放所有内容时，我的页面会变得更大，在某种程度上会被压扁。那么，我怎样才能让一切保持不变，添加一个“位置：固定；”到我所有的内容？你如何缩放，在什么样的机器上？我使用Ctrl+滚动键。你说的机器是指浏览器吗？我使用的是最新的chrome版本。请提供一个链接，指向某个网站，在该网站上缩放（ctrl滚动，或ctrl加号，ctrl减号）会弄乱布局？这不会阻止缩放。我有这个设置，缩放时它仍然会移动页面中的项目。谢谢你的帮助你的定位是什么？我知道位置：固定；我曾尝试将正文设置为“固定”，但它使其不可滚动，我添加了“溢出：滚动；”添加“fixed”后，它只会添加滚动条，但仍然不可滚动。而不是放置位置：fixed；在主体上，将其放在每个元素上。我对页面的主要部分做了处理，但缩放仍然会挤压它们。我试图使它们保持相同的大小，当我放大时，我可以在不压扁它们的情况下左右滚动。我从“#leftbody”中获取代码，并将其复制到我的css代码的body下，保留了除背景色和更改宽度%以外的所有内容。不幸的是，它不起作用。谢谢你的帮助。我的意思是你必须把所有的内容都改成%比如imgs，text。。。like.img{背景图像：url（“img/1.jpg”）；宽度：10%；高度：10%；}字体大小：10%；文字宽度：10%；高度：图像+块的高度为10%

#leftbody {
    position: relative;
    background-color:#e6f5ff;
    width:14%;
    display: inline-block;
    z-index:0;
    height:100%;
    float:left;
    padding:0%;
}
#rightbody {
    position: relative;
    background-color: none;
    width:84%;
    display: inline-block;
    z-index:0;
    height:100%;
    float:righht;
    padding:0%;
}   
.activebuttons2 {
            border: none;
            color: white;
            width:100%;
            padding: 10 0 10 0px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
}