Возникла странная проблема, например, разрывы макета веб-страницы при изменении размера браузера / при доступе через мобильное устройство / при переключении на более низкое разрешение (800 * 600/1024 * 768)
Временная ссылка: http://krishnaspirit.hostoi.com/
P.S: Это полноформатный веб-сайт , который отлично работает на 1366 * 768 .
CSS:
* { padding:0px; margin:0px; }
p,h1,h2,h3,h4,h5,h6,a{ font-family: 'Armata', sans-serif; }
/*header*/
.header { z-index:5000; position:fixed; top:0px; width:100%; min-width:960px; height:100px; background-color:#4E4E56;}
.header #nav li:last-child { margin-right:0px; }
.header #nav li { transition:1s ease all;line-height:40px;
display:inline-block; margin-right:3px; width:116px; height:40px;text-align:center; border-radius:5px;}
.header #nav li a { font-size:15px; color:#DCD0C0; display:block; height:100%; text-decoration:none; }
.header #nav li:hover { background-color: #DA635D; }
.header #nav li a:hover { color:#fff; }
.header #nav { position:absolute; right:10px; top:35px; width:600px; }
.current {background-color: #DA635D; cursor:none;}
.header #nav .current a { color:#fff; }
.header .logo img {width:100px; height:95px; position:absolute; top:5px; left:12px; line-height:100px; font-size:40px; color:#fff;}
.header .logo .name { font-size:40px; color:#ccc;
font-family: 'Armata', sans-serif; position:absolute; left:110px;top:29px; }
/*sub-head*/
.sub-header .top-logo { float:left; }
.sub-header .top-name { float:right; font-size:30px; padding-top:120px; color:#003366; }
.sub-header { width:85%; text-align:center; margin:150px auto; }
/*main-body*/
.content { float:left; }
.news { float:right; margin-right:5px; }
.news { box-shadow:3px 3px 5px #ccc; padding:0px; border-radius:3px; }
.news p { font-weight:bold; font-size:15px; padding-bottom:20px;}
.news { border:1px solid #ccc; width:27%; min-width:27%; padding:5px; height:300px;}
.news .news_body { padding:3px; text-align:center;}
.content { box-shadow:3px 3px 5px 0px #ccc; width:70%; height:300px; border-radius:3px; margin-left:5px; border:1px solid #ccc; font-size:15px; padding:5px;}
.content .sub-main { margin-top:15px; text-align:justify; padding:10px; }
.content #myMenu { width:100%; text-align:center; height:30px; }
.content #myMenu{ list-style-type:none; }
.content #myMenu li { border-bottom:1px solid #ccc; color:#999; display:inline-block; width:30%; line-height:30px;}
.content #myMenu li:hover { font-weight:bold; }
.content #myMenu li a { display:block; width:100%; }
.content #myMenu li a:hover { border-bottom:5px solid #DA635D; color:#DA635D; cursor:pointer;}
.body_wrapper { margin-bottom:500px; margin-top:70px; background-color:#ccc; }
/*footer*/
footer { width:100%; height:50px; line-height:50px; background-color:#4E4E56; }
footer p a{ color:#DA635D; text-decoration:none; font-weight:bold;}
2 ответа
Это не странная проблема. Чтобы решить эту проблему, вам нужно использовать @media query .
Изображение слева достаточно велико, чтобы занимать почти половину общей ширины экрана при разрешении 1024x768 . Вам нужно определить таблицу стилей на разных экранах с помощью медиа-запроса.
Пример -
@media screen and (max-width: 1024px){
.main .sub-header .top-logo{
width: 250px;
}
.main .sub-header .top-logo img{
width: 100%;
}
}
Этот фрагмент будет выполнять действия только в том случае, если ширина экрана устройства меньше или равна 1024px.
Как видите, для этого типа разрешения устройства я уменьшил ширину .top-logo, чтобы убедиться, что он правильно помещается на маленьком экране. Вам необходимо определить .top-name и другие элементы соответственно, чтобы они соответствовали разной ширине устройства. Надеюсь, вы уловили идею.
Еще одна причина, вызывающая эту проблему, - это когда в одном запросе @media отсутствует закрывающая скобка } .
Например, если в вашем CSS есть что-то вроде:
nav {
position: relative;
width: 95%;
margin: 10px auto 0 auto;
height: auto;
background-color: var(--magnolia);
font-family: Roboto;
}
@media screen and (min-width: 860px) {
nav {
margin: 0 auto;
}
<----------------- /* A closing brace "}" is missing here ! */
.navbar {
display: flex;
list-style-type: none;
flex-flow: row wrap;
justify-content: space-between;
align-content: center;
align-items: center;
margin: 0 auto;
padding: 0;
height: auto;
}
etc.
etc.
Это заставляет все CSS ниже вернуться к значениям по умолчанию, например. ширина: 100%. В такой ситуации избыток переполнения.
Поскольку W3C CSS Validator может этого не обнаружить, вам необходимо внимательно прочитать все запросы @media, прежде чем нарушающие элементы будут искать отсутствующие закрывающие фигурные скобки. Только один из них может испортить все, что находится ниже этой части веб-страницы. Исправьте это, и вдруг все станет нормально.
Похожие вопросы
Новые вопросы
html
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].
percentageв своемdivs? Так как этот вид макетаfluid. Потому что, если ваш макетfixed, вы установите дляdivsзначениеpxвместоpercentage. Иpercentageможет привести к поломке макета при изменении размера. Воспользуйтесь советом @aniskhan001 ниже. :)fixed layout, который я использую.fixed layout. В отличие отfluid, вам может не понравиться макет полной ширины :)