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

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 */