我有一个我正在建立的快速项目。这就是为什么我想让我的整个页面可扩展而不使用媒体查询，因为它会更快并节省我很多时间。唯一的问题是我还是初学者，我真的不知道如何让它完全可扩展。
有人可以帮我吗？正如您所看到的，页面并未真正优化，导航栏不会调整大小，链接也不会（正确地，至少）。提前谢谢。
HTML
<html>
<head>
<title>Thermocase</title>
<link rel="icon" href="img/fav.png" type="image/png">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img src="img/iphone.png" class="bg" />
<nav class="global-nav">
<img src="img/thermocase.png" class="logo-left" />
<ul class="menu">
<li><a href="#">Contact us</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Our Product</a></li>
</ul>
</nav>
</body>
</html>
CSS
@font-face {
font-family: bebas;
src: url(font/coyote.ttf);
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
@keyframes load_up {
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
@-webkit-keyframes load_up {
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
@-moz-keyframes load_up{
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
@-o-keyframes load_up{
from {
opacity:0;top:10%
}
to {
opacity:1;top:0%;
}
}
body {
background-color: white;
margin: 0;
width: 100%;
height: 100%;
}
.bg {
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
animation: load_up 2s forwards;
-webkit-animation: load_up 2s forwards;
-moz-animation: load_up 2s forwards;
-o-animation : load_up 2s forwards;
width: 45%;
left: 28%;
padding-top: 7%;
position: fixed;
}
.global-nav {
position: fixed;
top: 0;
z-index: 9999;
height: 15%;
width: 100%;
background: #ffff;
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.logo-left {
position: absolute;
top: 27%;
padding-left: 2%;
display: block;
width: 15%;
}
.menu li {
display: block;
font-family: bebas;
letter-spacing: -3px;
font-size: 20px;
float: right;
padding-right: 5%;
padding-top: 2%;
text-align: center;
}
.menu a:hover {
color:#CF2034;
transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-o-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-moz-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
-webkit-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
transition-timing-function: ease-in-out;
}
.menu a {
text-decoration: none;
color: inherit;
color: black;
transition-timing-function: ease-in-out;
}
.menu a:after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #CF2034;
content: "";
transform: scale(0);
-o-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
-moz-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
-webkit-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
transition-timing-function: ease-in-out;
}
.menu a:hover:after {
transform: scale(1);
}
答案 0 :(得分：-1)
这里有一些提示。
感谢各个单位，你可以这样做：
https://www.w3schools.com/CSSref/css_units.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/length
您可能还想在使用此类设备之前检查浏览器的支持：
允许较小的屏幕放大和缩小
<meta content="width=device-width, initial-scale=1" name="viewport">
viewport元素为浏览器提供了有关如何控制页面尺寸和缩放的说明。
width = device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。
初始比例= 1.0部分设置浏览器首次加载页面时的初始缩放级别 https://www.w3schools.com/css/css_rwd_viewport.asp
Dynamic serving - Google Web Fundamentals
我从未使用过这种技术，所以我希望您能在Web基础知识中找到所需的一切。
我知道你不想，但它是你有最好的选择
以下是一些参考资料：
希望我有所帮助：）