为什么网站不会缩小到目标分辨率

Question

我最近创建了一个personal site。

我想这样设计，无论目标分辨率有多低，我的网站都会缩小以适应整个屏幕，而无需向下滚动。我使用%值，以便它适合任何目标分辨率。

以下是包含所有主要属性的网站设计。

我的问题是，当我将浏览器的分辨率降低时，内容不会缩小以适应屏幕。

当我缩小浏览器分辨率时会发生这种情况。 为什么会这样？

以下是css属性

#myPageBody
{

    padding: 3% 15% 5% 15%;
}

#myPageNav
{
    text-align: center;
    padding:0%;
    margin-bottom:2%;
    font-weight :bold;
    font-size:150%; 
}

#myPageNav span 
{

    padding-right:2%; 
}

.page
{
    position:fixed;
    width:65%;
    height:70%;
    padding:1%;
    font-size:200%;

}

Answer 1

当您缩小屏幕尺寸时，字体大小不会改变，因此它会像往常一样占用相同的空间并分解。

Answer 2

放大或缩小时，像素会根据其提供的百分比分别增加或减少。

尝试提供max-width，min-width（以像素为单位），max-height和min-height（以像素为单位）属性给他们。 我可能错了，但这是一个很好的做法。

例如：

max-width:100%;
min-width:1024px; /* The least resolution to be considered */
max-height:/*desired percentage or pixels */
min-height:800px; /* The least resolution to be considered */

Answer 3

尝试在字体大小中使用end。实际上字体大小在开始时加载... 1ems = 100％