Масштабирование и сохранение пропорций
Я пытаюсь изучить HTML / CSS и работаю над панелью навигации, однако у меня возникают проблемы с масштабированием. Это сайт в полноэкранном режиме.
Тогда это веб-сайт полностью свернут.
Как вы можете понять, когда я масштабирую веб-сайт до разных масштабов, пропорции меняются, и вещи начинают перекрываться. Я попытался сделать детей абсолютными, а контейнеры - относительными. Я также использую em для измерения и не использую пиксели. Что я могу сделать, чтобы при масштабировании все оставалось пропорциональным?
Это рабочий пример js https://jsfiddle.net/2w1r136j/2/
HTML
<div class = "container">
<header>
<nav>
<img class = "logo" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt = "logo">
<div class = "leftNavContainer">
<a href = "#">Home</a>
<a href = "#">Story</a>
</div>
<div class = "rightNavContainer">
<a href = "#">Characters</a>
<a href = "#">Create</a>
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
position: absolute;
float: left;
}
.leftNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
.rightNavContainer {
float: right;
}
.rightNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
Ответы 2
Вы можете использовать медиа-запросы для изменения размеров в точках останова бывший:
@media only screen and (max-width: 600px) {
body {
font-size: .7em;
}
}
https://jsfiddle.net/2w1r136j/7/
Однако вы можете подумать об использовании медиа-запросов для включения адаптивного дизайна, который будет работать на мобильных устройствах. Распространенной идиомой является сворачивание пунктов меню в элементы полной ширины и увеличение размера шрифта.
что-то вроде: https://jsfiddle.net/2w1r136j/40/
Что ж, медиа-запросы могут работать, но гораздо лучше было бы использовать Flexbox или лучшую CSS Grid. Я обновил скрипку реализацией flexbox.
https://jsfiddle.net/khpv2azq/3/
HTML
<head>
<title>
Westworld
</title>
<link rel = "stylesheet" href = "css/style.css">
</head>
<div class = "container">
<header>
<nav>
<div class = "leftNavContainer">
<a href = "#">Home</a>
<a href = "#">Story</a>
</div>
<img class = "logo" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt = "logo">
<div class = "rightNavContainer">
<a href = "#">Characters</a>
<a href = "#">Create</a>
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
nav{
display: flex;
justify-content: space-between;
}
.container {
width: 100%;
height: 100%;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important;
/* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
}
.leftNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
.rightNavContainer {
}
.rightNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
Также ресурс MDN для Flex box -
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_F flexible_Box_Layout/Basic_Concepts_of_Flexbox
Надеюсь на эту помощь! ?
Спасибо, Шобхит. У меня только один вопрос: вы уменьшили поле с 70 пикселей до 4 пикселей. Я хотел сохранить расстояние между элементами около 70 пикселей. Есть ли способ сохранить эти элементы около 70 пикселей. Я изменил его обратно на 70 пикселей, но теперь, когда я масштабирую, элементы в конечном итоге накладываются друг на друга. Я пробовал поставить flex-wrap: nowrap;
Привет, Джек, В идеале интервалы должны быть указаны в пропорциях (что-то вроде%). Если вы хотите иметь фиксированное поле в пикселях, возможно, вам нужно добавить медиа-запрос для размеров экрана.
Спасибо. Я не знал, что интервал следует указывать в%.
Вы можете использовать медиа-запросы, в которых вы выборочно меняете CSS для элементов. Проверить css-tricks.com/css-media-queries