Html 正在修复'div'标记的缩放

我正在创建一个由标题、导航栏和内容组成的简单网站。它在屏幕分辨率为1366 X 768的浏览器中几乎可以正常运行，但如果调整浏览器的大小，各种事情都会一团糟。标题越来越大，并且超过了一切。导航栏和标题栏变得很小，所以我不能在链接上悬停。如果浏览器大小较小，将鼠标悬停在链接上会溢出。在任何分辨率或大小中，导航栏都会延伸到屏幕大小之外。如何解决这些问题，使我的站点能够正确扩展。我不是最好的设计师，我更熟悉后端web开发。我使用像

vh

和

vw

或

%

这样的测量来确定我的组件的大小

HTML

---

问题是您的加价，它仅限于您的分辨率，即1366 X 768 您正在使用额外的填充，而不使用边框属性 不应使用“高度”如果您不想调整浏览器的大小，请使用“最小高度”属性（如果您希望为元素提供高度）

看看下面的JSFIDLE链接，您将对此有一个清晰的认识

例如，边框框属性

*{
    box-sizing:border-box;
}

---

如果您使用IE，VH和VW有时会出现故障，无法正常工作

所以我的建议是通过使用

#header {
    height: 0;
    padding-bottom: 20%;
}

@导入url(http://fonts.googleapis.com/css?family=Quicksand);
身体{
保证金：0；
背景色：#dddddd；
}
#标题{
填充顶部：20px；
左侧填充：35px；
背景色：#9000f0；
身高：0；
垫底：20%；
宽度：100%；
溢出：无；
}
#导航{
背景色：#44aa66；
身高：0；
垫底：10%；
宽度：100%；
左：10%；
右：10%；
文本对齐：居中；
}
.头衔{
颜色：#f9f9f9；
保证金：0；
字体系列：“流沙”，无衬线；
字体大小：48px；
}
.文本{
身高：0；
宽度：5%；
垫底：7.5%；
颜色：#f9f9f9；
保证金：0；
填充顶部：20px；
左侧填充：50px；
浮动：左；
}
.文本：悬停{
背景色：#44cc66；
}

测试
测试
测试
测试
测试
测试

也许是一个起点。。。但这显示了使用vmax和媒体查询实现目标的示例。您可以根据自己的目的对这些值进行实验

代码：

---

请把你的代码放在你的问题中。chrome对我来说很好，即使从400px调整到1920px，我还是建议你使用

.text{height:40px；}

//除了percent@j08691对不起，我觉得粘贴代码和链接到小提琴有点多余，这是怎么离题的？@DomlThe面包不会使用

px

使其无法缩放。其他类型的车辆，如

vh

和

vw

似乎有问题。我还没有在chrome上测试过它，但在IE上它很烂。这是离题的，因为在询问代码的问题中没有代码。

*{
    box-sizing:border-box;
}

#header {
    height: 0;
    padding-bottom: 20%;
}

 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 1em;
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #dddddd;
}
#header {
    padding: 2vmax 2vmax;
    background-color: #9000f0;
    height: 9vmax;
    width: 100%;
    overflow: none;
}
#nav {
    background-color: #44aa66;
    min-height: 4vmax;
    width: 100%;
    padding: 0 2vmax;
}
.title {
    color: #f9f9f9;
    margin: 0;
    font-family:'Quicksand', sans-serif;
    font-size: 5vw;
}
.text {
    color: #f9f9f9;
    margin: 0;
    float:left;
    padding: .6vmax 1.5vmax;
    font-size: 2.3vmax;
}
.text:hover {
    background-color: #44cc66;
}
@media all and (max-width: 480px) {
    .text {
        font-size: 12px;
        padding: 5px 10px;
    }
    #nav {
        height: 25px;
    }
}