Question

我自己编写了我的Portfolio网站的代码，我的代码可能一团糟，因为我没有太多的代码经验。我遇到的问题是使网站具有响应能力，因此在电话上看起来也不错。

我认为问题是我使用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>

This is how i want it to look when using the phone

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

希望这会有所帮助，祝您好运！

未能使投资组合响应

1 个答案: