не в состоянии сделать портфель отзывчивым - PullRequest
Новая
       5

не в состоянии сделать портфель отзывчивым

0 голосов
/ 14 ноября 2018

Я сам кодировал свой портфель-сайт, и мой код, вероятно, беспорядок, потому что у меня нет такого большого опыта работы с кодом. У меня проблема в том, чтобы сделать сайт отзывчивым, чтобы он также хорошо смотрелся на телефоне.

Думаю, проблема в том, что я использовал 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/

1 Ответ

0 голосов
/ 14 ноября 2018

Создание адаптивного веб-сайта происходит в основном в таблице стилей (css), использование% поможет вместо px или em обернуть ваши элементы в контейнеры div, чтобы обеспечить выравнивание элементов при доступе с меньшего устройства / экрана.

Вам придется изменить размеры определенных элементов или даже скрыть их на экранах определенного размера, используя код, подобный приведенному ниже: 

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

Проверьте этот сайт для более подробной информации: https://seesparkbox.com/foundry/structuring_a_responsive_stylesheet

Надеюсь, это поможет, удачи!

...