#html #css
Вопрос:
Поэтому я попытался сделать свой код адаптивным для мобильных устройств и понял, как это сделать, но возникла еще одна проблема, которую я не смог решить. Страница увеличивается(увеличивается из браузера, поэтому мне приходится уменьшать масштаб) всякий раз, когда я открываю ее на экране другого размера (на другом ноутбуке), Так в чем же здесь проблема и как я могу ее решить ?. Заранее спасибо за вашу помощь.
HTML
.container{ max-width: 100%; text-align: center; display: flex; padding: 1%; } body{ width: auto; height: auto; background-color: #383C46; background-size: contain; margin: 0; } h{ width: 317px; height: 59px; left: 389px; top: 26px; font-size: 25px; } #cinfo{ cursor: pointer; text-transform: uppercase; width: 317px; height: 59px; font-size: 20px; text-decoration: none; } #getstarted{ text-transform: uppercase; width: 317px; height: 59px; font-size: 20px; text-decoration: none; } #home{ text-transform: uppercase; width: 317px; height: 59px; font-size: 20px; text-decoration: none; } img.content { position: relative; left: 20%; width: 240px; height: 240px; float: left; padding: 60px; margin-left: 20px; margin-top: 150px; } @media screen and (max-width: 800px) { .cont { width: 100%; margin-left: -144px; margin-top: -190px; padding: 50px; } } #menu, #menu ul{ margin: 0; padding: 0; list-style: none; } .menu{ padding-bottom: 0.2%; padding-top:1%; padding-left: 10%; padding-right:10%; display: block; float: left; width: 1100px; margin: 50px auto; background-color: #2a2e33; border-radius: 6px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .menu-item{ min-width: 200px; } .menu::before, #menu::after{ content: ''; display: table; } .menu:after{ clear: both; } .menu li { float: left; position: relative; display: block; } .menu .headd{ left: -10%; top: -20%; font-size: 27x; color:white; } .menu a{ text-decoration: none; color:white; } .menu ul{ padding-left: 0px; opacity: 0; visibility: hidden; position: absolute; top: 72px; left: -10px; z-index: 1; transition: all .3s ease-in-out; background: black; } .menu li:hover > ul{ opacity: 1; visibility: visible; margin: 0; } .menu ul ul{ top: 0; left: 150px; margin: 0 0 0 20px; } .menu ul li{ position: relative; float: none; display: block; border: 0; background:rgba(255, 249, 249, 0.25); text-align: center; } .menu ul a{ padding: 10px; width: 130px; display: block; white-space: nowrap; float: none; text-transform: uppercase; } .menu ul a:hover{ background: rgb(73, 73, 73); } .headbox{ position: relative; left: 100px; margin-left: auto ; margin-right: auto; margin-top: 90px; margin-bottom: 60px; display: block; font-size: 2vh; } .left-center{ padding-left: 260px;; } .lec{ position: relative; margin-left: auto ; margin-right: auto; margin-top: 90px; margin-bottom: 60px; display: block; } @media screen and (max-width: 800px) { .lec{ width: 350px; height: 286px; } .headbox{ left: -30px; } .menu { width: 100%; margin-top: 0px; margin-left: 1px; padding-right: 20px; } .menu .headd{ position: absolute; left: -190px; } .menu a{ position: relative; left: 76px; top: 54%; padding-right: 40px; } .menu #home{ position: relative; left: 106%; } .left-center{ padding-top: 10px; padding-left: 77px; width: 200px; height: 150px; } .menu ul a{ position: relative; left: -1px; padding: 2px; width: 100px; display: block; white-space: nowrap; float: none; text-transform: uppercase; } .menu ul li{ float: none; display: block; border: 0; background:rgba(255, 249, 249, 0.25); } .menu ul{ opacity: 1; position: absolute; top: 38px; left: 68px; z-index: 1; transition: all .3s ease-in-out; background: black; } .menu ul ul{ left: 90px; padding-left: 20px; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Development course</title> <link rel="stylesheet" type="text/css" href="allcontent.css"> </head> <body> <div class="container"> <ul class = "menu"> <li><h style = "padding-right: 120px; padding-left: 50px;" class = "headd">WEB Course</h></li> <li><a style = "padding-right: 100px;" id = "getstarted" href="allcontent.html">Get started</a></li> <li><a style = "padding-right: 100px;"id = "cinfo" >Course Info</a> <ul> <li><a id = "htm" href="htmlcourse.html">HTML</a> <ul> <li><a id = "lec" href="htmlcourse.html">Videos</a> <li><a id = "tut" href="htmltut.html">Lectures</a> <li><a id = "Lab" href="htmllab.html">Labs</a> </ul> </li> <li><a id = "cs" href="csscourse.html">CSS</a> <ul> <li><a id = "cslec" href="csscourse.html">videos</a> <li><a id = "cstut1" href="csstut.html">Lectures</a> <li><a id = "csLab1" href="csslab.html">Labs</a> </ul> </li> <li><a id = "java" href="jscourse.html">JavaScript</a> <ul> <li><a id = "javalec" href="jscourse.html">videos</a> <li><a id = "javatut" href="jstut.html">Lectures</a> <li><a id = "javaLab" href="jslab.html">Labs</a> </ul> </li> </ul> </li> <li><a id = "home" href="home.html">Home</a></li> </ul> </div> <style> h, a{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-style: normal; font-weight: bold; line-height: 41px; color: #FFFFFF; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } img:hover{opacity: 0.6; transform: scale(1.2); transition: 0.8s ease-in-out;} img:not(:hover){transition: 0.5s ease-in-out;} a:hover{text-shadow: 0 4px 4px rgb(0, 0, 0); transition: 0.8s ease-in-out;} a:not(:hover){transition: 0.5s ease-in-out;} </style> <div class= "cont"> <a href = "htmlcourse.html"> <img class = "content" src ="images/html.png"> </a> <a href = "csscourse.html"> <img class = "content" src ="images/css.png"> </a> <a href = "jscourse.html"> <img class = "content" src ="images/js.png"> </a> </div> </div> </body> </html> Комментарии:
1. Пожалуйста, добавьте больше деталей и ясности. Я понятия не имею, о какой проблеме вы говорите. Также предоставление абсолютной величины в качестве ширины или поля/отступа совершенно противоположно тому, чтобы быть репозитивным. То же самое для ожидания одинакового поведения на любом экране сайта также противоположно отзывчивости. И последнее, но не менее важное: вы не должны подавать в суд на встроенный стиль за пределами шаблонов электронной почты. Проблемы с весом, которые вы вызываете, впоследствии будет довольно сложно исправить.
2. Извините за неясность, моя проблема в том, что, когда я открыл свой проект на другом ноутбуке, у которого экран меньше, страница по умолчанию увеличивается, мне нужно уменьшить масштаб браузера на 80%, чтобы он был идеальным.
3. Он не увеличивает масштаб, экран просто меньше, из-за чего код кажется больше. Проблема здесь в том, что ваш код не реагирует и, следовательно, не адаптируется к различным размерам экрана.