HTML, CSS & Media-запросы - изменение размеров в Chrome и Firefox отличается - PullRequest
Новая
       9

HTML, CSS & Media-запросы - изменение размеров в Chrome и Firefox отличается

0 голосов
/ 04 мая 2018

Итак, я поиграл, чтобы веб-сайт работал как для настольных компьютеров, так и для телефонов. Однако я получаю запутанные вещи, над которыми работаю.

В основном я пытаюсь сделать так, чтобы на рабочем столе это выглядело так:

Desktop

и при разговоре по телефону

phone

Однако, что происходит, когда я пытаюсь решить эту проблему в Google Chrome - я получаю такой результат:

Изменение размера хрома

и при работе в Firefox:

Изменение размера Firefox

где мы можем видеть, что в Firefox это выглядит довольно странно, но не совсем ...

Однако я понятия не имею, в чем причина. То, что я сделал, это то, что я использую файл HTML и разделенный CSS. Я использовал функцию @ media: 

@media only screen and (max-width: 824px) {
    .sidenav{
        width: 100%;
        height: auto;
        position: absolute;
    }
    .main{
        width: 100%;
        padding:0 0 0 0;
        margin-top: 50%;
    }
    div.gallery{
        float: none;
        display: inline;
        width: 100%;
    }

    #pic2 {
        padding:0px;
    }
    h2{
        padding: 10% 0 0 20px;
    }
}

и вот как я подключаю его к своему HTML: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="sidenav">
  <img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas" style="width:100px;height:100px;">
  <h1>Meny</h1>
  <a href="#länk1">Länk 1</a>
  <a href="#länk2">Länk 2</a>
  <a href="#länk3">Länk 3</a>
  <a href="#länk4">Länk 4</a>
</div>

Что я делаю не так? По сути, я хочу сделать так, чтобы первые две картинки были похожи на первую версию настольной версии, а когда я изменяю размер до мобильной версии, они должны быть похожи на картинку № 2 ...

Также, пожалуйста! Если предоставлено слишком мало кода или что-то еще отсутствует, не стесняйтесь комментировать. Я буду быстро ответить!

Fiddle:

Fiddle

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

То, что происходит, происходит из-за абсолютного положения строки меню и .main 100% margin-top.

Почему margin-top: 100% (ширина содержащего блока 100%) достаточно, чтобы не допустить div с основным классом под div с классом sidenav? Пожалуйста, проверьте этот вопрос Margin-top: 100% получает значение родительской ширины ... странно

Вот моя скрипка. Пожалуйста, проверьте основной класс в вашем медиа-запросе.

Конечно, просто чтобы вы поняли проблему и заставили вещи работать "как они есть".

Это реальный случай, конечно, я бы хотя бы позволил javascript вычислить это абсолютное значение на полях в пикселях. Таким образом, в случае каких-либо изменений меню вам не нужно редактировать CSS.

https://jsfiddle.net/8up8yc4h/2/

@media only screen and (max-width: 824px) {
    .sidenav{
        width: 100%;
        height: auto;
        position: fixed;
    }
    .main{
        width: 100%;
        padding:0 0 0 0;
        /*margin-top: 100%;*/
        margin-top: 528px;
    }
    div.gallery{
        float: none;
        display: inline;
        width: 100%;
    }

    #pic2 {
        padding:0px;
    }
    h2{
        padding: 10% 0 0 20px;
    }
}
0 голосов
/ 04 мая 2018

Попробуйте добавить это в свой тег Head 

<meta name="viewport" content="width=device-width, initial-scale=1">

Чтобы указать браузеру использовать ширину устройства.

РЕДАКТИРОВАТЬ

Также попробуйте этот медиа-запрос, чтобы удалить абсолютное / фиксированное позиционирование, а также поля. 

body {
    font-family: "Lato", sans-serif;
}

h1 {
	color: white;
	text-align: center;
}

h2{
    color: black;
    font-size: 50px;
    text-align: left;
    padding-right: 20px;

}

.sidenav {
	text-align: center;
	height: 100%;
	width: 15%;
	/* position: fixed; */
	top: 0;
	left: 0;
	background-color: black;
	padding-top: 100px;
}

.sidenav a {
    text-decoration: none;
    font-size: 15px;
    text-align: center;
    color: #818181;
    display: block;
    border: 10px solid black;
    background-color: white;
    border-radius: 25px;
    padding: 12px;

}

.sidenav a:hover {
    color: #f1f1f1;
}

.main {
    padding-left: 15%;
}


div.gallery {
    margin: 5px;
    float: left;
    width: 28.3%;
    display: inline;
}


div.gallery img {
    width: 100%;
    height: auto;
    border-radius: 35px;
}

div.desc {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
    padding: 15px;
    text-align: left;
}

#pic2{
    padding: 0px 70px 0 70px;
}
.text{
    float: left;
    font-size: 17px; 
    position: relative;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
    width: 30%; 
    height: 30%;
    padding: 10px 20px 10px 20px;
    border-radius: 35px;
}

footer {
    text-align: center;
    font-style: italic;
    font-family: Impact, Charcoal, sans-serif;
}

@media only screen and (max-width: 824px) {
    .sidenav{
        width: 100%;
        height: auto;
        /* position: absolute; */
    }
    .main{
        width: 100%;
        padding:0 0 0 0;
        /*margin-top: 100%;*/
        /* margin-top: 528px; */
    }
    div.gallery{
        float: none;
        display: inline;
        width: 100%;
    }

    #pic2 {
        padding:0px;
    }
    h2{
        padding: 10% 0 0 20px;
    }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Inl. 6 - Barry</title><!-- Titel av HTML, Kan även synas på TAB i Google chrome etc.-->

</head>
<body>

<div class="sidenav">
  <img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas" style="width:100px;height:100px;">
  <h1>Meny</h1>
  <a href="#länk1">Länk 1</a>
  <a href="#länk2">Länk 2</a>
  <a href="#länk3">Länk 3</a>
  <a href="#länk4">Länk 4</a>
</div>


<div class="main">
  <h2>Innehåll</h2>

  <div class="gallery">
    <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  </a>
  <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

  <div class="gallery" id="pic2">
    <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  </a>
  <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

  <div class="gallery">
    <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  </a>
  <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>


 
<div class="text">
  <hr>
  <div class="clearfix">
  <img class="img2" src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
  
  <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
  <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
  <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</p>
  <p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr>
<footer>
<p>Skriven i HTML5</p>
</footer>
</div>


</div>

     
</body>
</html>
...