未能使投资组合做出响应

Question

我自己编写了我的投资组合网站，我的代码可能一团糟，因为我没有那么多代码经验。我遇到的问题是让网站做出响应，这样它在手机上也很好看。

我认为问题是我用了px而不是%，但我尝试了各种各样的东西，看起来不像我想要的。该网站https://www.jessewensing.com

我会发布代码的一部分。

.content {
width: calc(100vw - 30%);
position: relative;
left: 30%;
margin-top: -6%;
}
.menu-header {
font-family: 'Akkurat';
text-align: left;
}
.project-nav {
margin-top: 20px;
font-family: 'Akkurat';
}
img { 
cursor:s-resize;
-webkit-filter: drop-shadow(5px 5px 5px #A9A9A9);
filter: drop-shadow(5px 5px 5px #A9A9A9);
top:-2%;
margin-top: 10%;
width:50%;
}
ul {
list-style-type: none;
text-align: left;
left:3%;
margin-left: 0;
padding: 0;
position: fixed;
}
a {
text-decoration: none;
color: black;
color:red;
}
p {
top: 10px;
right:3%;
font-family: 'Akkurat';
position: fixed;
z-index: 2;
}
p.naam {
top:10px;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.contact {
top:76%;
left:3%;
font-family: 'Akkurat';
position: fixed;
}

p.cv {
top:80%;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.text {
margin-top: 106px;
right:3%;
font-family: 'Akkurat';
color:red;
}
</style>

这就是我希望它在使用手机时的样子

https://jsfiddle.net/f51xjnzu/

Answer 1

使网站响应主要发生在样式表(css(中，使用%而不是px或em将元素包装在div容器中，以帮助在从较小的设备/屏幕访问时保持元素对齐。

您将不得不调整某些元素的大小，甚至使用下面类似的代码将其隐藏在特定的屏幕大小：

@media 
only screen
and (min-width : 1024px) {}

查看此网站了解更多详细信息：https://seesparkbox.com/foundry/structuring_a_responsive_stylesheet

希望这能有所帮助，祝你好运！