мой веб-сайт в порядке на iphone 6/7/8, но портится на других, как мне исправить

ProgramBox

мой веб-сайт в порядке на iphone 6/7/8, но портится на других, как мне исправить

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #responsive #media

Вопрос:

я использовал медиа-запросы, чтобы сделать свой сайт подходящим для iphone /6/7/8 но когда я меняю его на iphone x в инструментах разработки, справа появляется некоторое черное пространство, и то же самое с другими устройствами, как мне сделать свой веб-сайт подходящим для всех устройств, какие запросы я использую и что я делаю неправильно?

 var navLinks = document.getElementById("navLinks");

function showMenu() {
    navLinks.style.right = "0";

}
function hideMenu() {
    navLinks.style.right = "-400px";

}

 /* MEDIA CSS */
@media screen and (max -width: 700px) {
  .nav-links ul li {
    display: block;
  }
  .nav-links {
    position: fixed;
    background: #ffd700;
    height: 100vh;
    width: 12.5em;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
  }
  nav .fas {
    display: block;
    color: black;
    margin: 1.625em;
    font-size: 1.375em;
    cursor: pointer;
    position: relative;
    right: 0.6em;
  }
  .nav-links ul {
    padding: 1em;
  }
  .text-box h1 {
    font-size: 4.3em;
  }
  nav img {
    width: 20em;
    position: relative;
    top: 0.1em;
  }
  .player-info p {
    padding-left: 0;
    font-size: 0.8em;
    padding-top: 0;
  }
}

/* NORMAL CSS */
* {
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
}

@font-face {
  font-family: "BatmanForeverOutline";
  font-style: normal;
  font-weight: normal;
  src: local("BatmanForeverOutline"), url("batmfo__.woff") format("woff");
}

@font-face {
  font-family: "BatmanForeverAlternate";
  font-style: normal;
  font-weight: normal;
  src: local("BatmanForeverAlternate"), url("batmfa__.woff") format("woff");
}

body {
  background-color: black;
  width: 100%;
}

em {
  color: #ffd700;
  font-style: normal;
  font-family: "Nunito", sans-serif;
}
.header {
  min-height: 100vh;
  min-width: 200px;
  background-image: linear-gradient(
    rgba(105, 105, 105, 0.7),
    rgba(105, 105, 105, 0.7)
  );
  background-position: center;
  background-size: cover;
  position: relative;
}

.main-texts {
  min-height: 85vh;
  background-image: url(images/background.jpeg);
  background-position: center;
  background-size: cover;
  position: relative;
  border-bottom: 0.1875em solid #ffd700;
}
.menu-header {
  width: 100%;
  background-color: #ffd700;
  min-height: 15vh;
  border-bottom: 0.1875em solid #fff;
}

nav img {
  width: 25em;
}

nav {
  display: flex;
  padding: 2% 1%;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  flex: 1;
  text-align: center;
  position: relative;
  right: 12.5em;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 0.5em 3.125em;
  position: relative;
}

.nav-links ul li a {
  color: rgb(105, 105, 105);
  text-decoration: none;
  font-size: 1.375em;
  transition: 0.5s;
}

.nav-links ul li::after {
  content: "";
  width: 0%;
  height: 0.1875em;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
  position: relative;
  bottom: 0.1875em;
}

.nav-links ul li:hover::after {
  width: 100%;
}

.nav-links ul li a:hover {
  color: white;
}

.text-box {
  color: #fff;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.text-box h1 {
  font-size: 5.625em;
  font-family: "Nunito", sans-serif;
}
.text-box p {
  margin: 0.625em 0 2.5em;
  font-size: 1.5625em;
  color: #fff;
}
.player-info {
  margin: 0.625em 0 2.5em;
  font-size: 1.5625em;
  color: #fff;
}
.hero-btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border: 0.0625em solid #fff;
  padding: 0.5em 1.25em;
  font-size: 1.125em;
  background: transparent;
  border-radius: 0.1875em;
  position: relative;
  cursor: pointer;
}

.hero-btn:hover {
  border: 0.0625em solid #fff;
  background: #ffd700;
  transition: 0.5s;
  border-radius: 0.3125em;
}

nav .fas {
  display: none;
}

.meet-me {
  width: 80%;
  text-align: center;
  margin: auto;
  padding-top: 6.25em;
}
.meet-me h1 {
  font-size: 2.25em;
  font-weight: 600;
  color: #fff;
  padding-bottom: 1.875em;
}

.meet-me p {
  text-align: left;
  padding-left: 9.375em;
}

footer {
  width: 100%;
  background-color: black;
  height: 20.625em;
  border-top: 0.3125em solid #fff;
}

.footer-headers {
  text-align: center;
  padding-top: 1.25em;

  padding-bottom: 1.25em;
}

.footer-headers ul li {
  list-style: none;
  display: inline-block;
  padding: 1.25em 5em;
  position: relative;
}

.footer-headers ul li a {
  text-decoration: none;
  color: #ffd700;
  font-size: 1.125em;
  transition: 0.5s;
}

.footer-headers ul li a::after {
  content: "";
  width: 0%;
  height: 0.1875em;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
  position: relative;
  bottom: 0.1875em;
}

.footer-headers ul li a:hover::after {
  width: 100%;
}
.foot-logo img {
  width: 25em;
  padding-top: 0.0625em;
  position: relative;
  right: 1.875em;
}

.foot-logo {
  text-align: center;
}

.copyright h4 {
  color: #ffd700;
  position: relative;
  top: 0.625em;
}
.copyright {
  text-align: center;
  position: relative;
  top: 2.5em;
}

.copyright h4 a {
  text-decoration: none;
  color: #ffd700;
  transition: 0.5s;
}

.copyright h4 a:hover {
  color: red;
}

.socials a i {
  color: #ffd700;
  transition: 0.5s;
}
.socials a i:hover {
  color: red;
}
.socials {
  text-align: center;
  position: relative;
  top: 1.5625em;
}

.socials i {
  padding: 0.3125em 2.5em;
}

 <html lang="en">
<head>

    <script>
        ScrollReveal({ reset: true });
    </script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home | LuxxMob</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
            href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700amp;display=swap"
            rel="stylesheet"
    />
    <script
            src="https://kit.fontawesome.com/360332bae9.js"
            crossorigin="anonymous"
    ></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
            href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700amp;display=swap"
            rel="stylesheet"

    />

</head>
<body>

<section class="header">
    <div class="menu-header">
        <nav>
            <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
            <div class="nav-links" id="navLinks">
                <i class="fas fa-times" onclick="hideMenu()"></i>
                <ul>
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="news.html">News</a>
                    </li>
                    <li>
                        <a href="players.html">Players</a>
                    </li>
                    <li>
                        <a href="partners.html">Partners</a>
                    </li>
                    <li>
                        <a href="about-us.html">About Us</a>
                    </li>
                </ul>
            </div>
            <i class="fas fa-bars" onclick="showMenu()"></i>
        </nav>
    </div>

    <div class="main-texts">
        <div class="text-box">
            <h1>Welcome To <em>LuxxMob</em></h1>
            <p>An upcoming eSports team recruiting talented gamers and quality content creators.</p>

            <a href="about-us.html" class="hero-btn">About Us</a>
        </div>
    </div>
</section>

<!--NEXT SECTION MEET THE OWNER-->

<section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
        <p>
            Meet the competitive players, content creators and the owner of
            LuxxMob. A rapidly growing team of highly skilled members, providing
            some of the best content and gameplay available on social media
            currently.
        </p>
    </div>
</section>

<!--FOOTER SECTION-->

<footer>
    <div class="footer-headers">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="news.html">News</a>
            </li>
            <li>
                <a href="players.html">Players</a>
            </li>
            <li>
                <a href="partners.html">Partners</a>
            </li>
            <li>
                <a href="about-us.html">About Us</a>
            </li>
        </ul>
    </div>
    <div class="foot-logo">
        <img src="images/HD_FILE (2).png" />

    </div>
    <div class="socials">

        <a href="https://www.tiktok.com/@luxxmob?lang=en"> <i class="fab fa-tiktok"></i></a>
        <a href="https://twitter.com/LuxxMob"> <i class="fab fa-twitter"></i></a>
        <a href="https://www.instagram.com/TheLuxxMob/"> <i class="fab fa-instagram"></i></a>
    </div>
    <div class="copyright">
        <h4>amp;copy 2021 LuxxMob</h4>
        <h4>Made with  amp;#10084 by <a href="https://www.tiktok.com/@truechow?lang=en">@truechow</a></h4>
    </div>
</footer>

Ответ №1:

Как я вижу в вашем коде, вы использовали только один медиа-запрос, поэтому попробуйте добавить медиа-запросы, учитывая все размеры устройств. Пожалуйста, найдите ниже медиа-запросы:

 @media screen and (min-width: 320px) and (max-width: 576px) {

}

@media screen and (min-width: 577px) and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px) {

}

@media screen and (min-width: 992px) and (max-width: 1055px) {

}

@media screen and (min-width: 992px) and (max-width: 1200px) {

}

@media screen and (min-width: 1201px) and (max-width: 1400px) {

}

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

2. это для всех устройств, при необходимости вы можете использовать все вышеперечисленное или просто можете использовать только определенные устройства, это зависит от вас.

3. можете ли вы сказать мне, для каких устройств он предназначен выше

Ответ №2:

CSS overflow : hidden может быть полезен для вас.

Метки: как мне исправить, мой веб-сайт в порядке на iphone 6/7/8, но портится на других

Вопрос:

Ответ №1:

Комментарии:

Ответ №2:

Вам также может понравиться

XDocument получает все узлы с атрибутами

Среднее значение Google Sheets для каждой строки

правильный способ присвоения номера элементам в коллекции списков