css 某些移动的设备上的响应式网页布局中断-需要确保跨设备兼容性

von4xj4u  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(169)

尽管实现了CSS媒体查询，我在某些移动的设备上实现主页的响应**困难。虽然该网站在某些手机上运行良好，但在其他手机上，元素重叠，文本被切断，按钮被扭曲，整体布局变得无法使用。我需要帮助，以确定根本原因和潜在的解决方案，以确保跨设备兼容我的网页。

验证码：

  1. <!DOCTYPE html>
  2. <html lang='eng'>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>FITIFY || Fitness Tracker</title>
  7.   <!--Bootstrap Scripts(CSS)-->
  8.   <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65' crossorigin='anonymous'>
  9.   <!--Awesome Fonts-->
  10.   <script src="https://kit.fontawesome.com/fd6cc398e6.js" crossorigin="anonymous"></script>
  11.   <!--Google Fonts-->
  12.   <link rel="preconnect" href="https://fonts.googleapis.com">
  13.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14.   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&family=Roboto+Mono&family=Instrument+Sans&display=swap" rel="stylesheet">
  15.   <!--CSS Styling-->
  16.   <style>
  17.     h1 {
  18.       color: gold;
  19.       font-family: 'Open Sans', sans-serif;
  20.       font-weight: bolder;
  21.     }
  22.     
  23.     h2,
  24.     h3 {
  25.       color: white;
  26.       margin: 6%;
  27.       text-align: center;
  28.       font-family: 'Instrument Sans', sans-serif;
  29.       font-size: 40px;
  30.       font-weight: bold;
  31.     }
  32.     
  33.     h5 {
  34.       background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  35.       -webkit-background-clip: text;
  36.       -webkit-text-fill-color: transparent;
  37.       background-clip: text;
  38.     }
  39.     
  40.     a {
  41.       text-decoration: none;
  42.       color: white;
  43.       margin: 3%;
  44.     }
  45.     
  46.     .nav-brand {
  47.       margin: 1%;
  48.       color: white;
  49.     }
  50.     
  51.     .btn {
  52.       background-color: #19376D;
  53.     }
  54.     
  55.     .btn:hover {
  56.       background-color: green;
  57.       font-weight: bold;
  58.     }
  59.     
  60.     .nav-links {
  61.       width: 40%;
  62.       margin-right: 0%;
  63.     }
  64.     
  65.     .dropdown {
  66.       display: inline-block;
  67.     }
  68.     
  69.     .main-box {
  70.       background: linear-gradient(to bottom right, #3d97ce 0%, #12debb 100%);
  71.       width: 100%;
  72.       height: 500px;
  73.       border-bottom: solid black 3px;
  74.       margin-top: 7%;
  75.       position: relative;
  76.     }
  77.     
  78.     .main-text-box {
  79.       float: left;
  80.       width: 50%;
  81.       height: 100%;
  82.     }
  83.     
  84.     #main-para {
  85.       color: white;
  86.       text-align: left;
  87.       margin: 2% 2% 2% 10%;
  88.       font-size: 22px;
  89.       visibility: hidden;
  90.       font-weight: 400;
  91.     }
  92.     
  93.     .main-image-box {
  94.       float: right;
  95.       width: 50%;
  96.       height: 100%;
  97.     }
  98.     
  99.     #main-img {
  100.       width: 80%;
  101.       height: 80%;
  102.       margin: 5%;
  103.       border: white solid 3px;
  104.     }
  105.     
  106.     #to-features {
  107.       background-color: black;
  108.       color: white;
  109.       border: solid 2.5px;
  110.       border-image-slice: 1;
  111.       border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  112.       width: 10%;
  113.       height: 10%;
  114.       position: absolute;
  115.       margin: 0% 40% 0% 20%;
  116.       bottom: 10%;
  117.       font-family: 'Instrument Sans', sans-serif;
  118.       font-size: 20px;
  119.       font-weight: bold;
  120.     }
  121.     
  122.     .feature-box {
  123.       background: linear-gradient(to top right, #3d97ce 0%, #12debb 100%);
  124.       background-size: cover;
  125.       height: auto;
  126.     }
  127.     
  128.     .card {
  129.       color: black;
  130.       background-color: white;
  131.       width: 21%;
  132.       height: 250px;
  133.       margin: 14% 2% 10% 2%;
  134.     }
  135.     
  136.     .row {
  137.       margin-right: 0%;
  138.     }
  139.     
  140.     .cards-btn {
  141.       background-color: black;
  142.       color: white;
  143.       border: solid 3px;
  144.       border-image-slice: 1;
  145.       border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  146.       padding: 2%;
  147.       margin: 50px 10% 2% 20%;
  148.       font-family: 'Instrument Sans', sans-serif;
  149.       font-size: 13px;
  150.       font-weight: bold;
  151.     }
  152.     
  153.     .cards-btn:hover {
  154.       color: green;
  155.     }
  156.     
  157.     @media screen and (min-width: 300px) and (max-width: 650px) {
  158.       /*targets mobile devices */
  159.       h1 {
  160.         font-size: 1.4rem;
  161.       }
  162.       h2 {
  163.         font-size: 2rem;
  164.         margin-bottom: 10%;
  165.       }
  166.       .nav-brand {
  167.         width: 10%;
  168.       }
  169.       a {
  170.         margin: 0.5%;
  171.         font-size: 0.7rem;
  172.       }
  173.       .nav-links {
  174.         width: 75%;
  175.       }
  176.       .btn {
  177.         font-size: 45%;
  178.       }
  179.       .main-box {
  180.         margin-top: 12%;
  181.         height: 100vh;
  182.       }
  183.       .main-text-box {
  184.         width: 100%;
  185.       }
  186.       #main-para {
  187.         font-size: 1.3rem;
  188.       }
  189.       .main-image-box {
  190.         display: none;
  191.       }
  192.       #to-features {
  193.         width: 40%;
  194.         height: 6%;
  195.         padding: 1%;
  196.         margin: 10% 20% 0% 30%;
  197.         bottom: 17%;
  198.       }
  199.       .card {
  200.         width: 60%;
  201.         margin: 15% 20% 5% 20%;
  202.       }
  203.       #goal-btn {
  204.         padding: 1%;
  205.         margin-left: 10%;
  206.       }
  207.     }
  208.     
  209.     @media screen and (min-width: 651px) and (max-width: 1200px) {
  210.       h1 {
  211.         font-size: 3rem;
  212.       }
  213.       h2 {
  214.         font-size: 4rem;
  215.       }
  216.       a {
  217.         margin: 2%;
  218.         font-size: 1.5rem;
  219.       }
  220.       .nav-links {
  221.         margin: 0%;
  222.         width: 75%;
  223.       }
  224.       .btn {
  225.         font-size: 1.5rem;
  226.         margin-right: 1%;
  227.       }
  228.       .main-box {
  229.         margin-top: 8%;
  230.         height: 100vh;
  231.       }
  232.       .main-text-box {
  233.         width: 100%;
  234.       }
  235.       #main-para {
  236.         font-size: 40px;
  237.       }
  238.       .main-image-box {
  239.         display: none;
  240.       }
  241.       #to-features {
  242.         width: 30%;
  243.         height: 9%;
  244.         padding: 1%;
  245.         margin: 8% 20% 0% 35%;
  246.       }
  247.       .card {
  248.         width: 30%;
  249.         margin: 15% 10% 5% 35%;
  250.       }
  251.       #goal-btn {
  252.         margin-left: 10%;
  253.       }
  254.     }
  255.     
  256.     @media screen and (min-width: 1800px) and (max-width: 2600px) {
  257.       /* 4k */
  258.       h1 {
  259.         font-size: 6rem;
  260.       }
  261.       h2 {
  262.         font-size: 5rem;
  263.         font-weight: bolder;
  264.       }
  265.       a {
  266.         margin: 5%;
  267.         font-size: 3rem;
  268.       }
  269.       .nav-links {
  270.         margin: 0%;
  271.         width: 55%;
  272.       }
  273.       .btn {
  274.         font-size: 3rem;
  275.         margin-right: 10%;
  276.       }
  277.       .main-box {
  278.         margin-top: 6%;
  279.         height: 100vh;
  280.       }
  281.       #main-para {
  282.         font-size: 60px;
  283.       }
  284.       #to-features {
  285.         width: 20%;
  286.         height: 9%;
  287.         padding: 1%;
  288.         font-size: 40px;
  289.         margin: 10% 0% 0% 15%;
  290.       }
  291.       .card {
  292.         width: 20%;
  293.         margin: 15% 10% 5% 35%;
  294.       }
  295.       .card {
  296.         width: 20%;
  297.         height: 250px;
  298.         margin: 15% 3% 10% 2%;
  299.       }
  300.       #goal-btn {
  301.         margin-left: 10%;
  302.       }
  303.     }
  304.   </style>
  305. </head>
  307. <body>
  308.   <header>
  309.     <nav class="navbar bg-dark fixed-top" data-bs-theme="dark">
  310.       <div class="nav-brand">
  311.         <h1>FITIFY</h1>
  312.       </div>
  313.       <div class="nav-links">
  314.         <a href="./index.html">HOME</a>
  315.         <div class="dropdown">
  316.           <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  317.                       FEATURES
  318.                     </button>
  319.           <ul class="dropdown-menu gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="light">
  320.             <li><a class="dropdown-item rounded-2" href="./bmi.html">BMI CALCULATOR</a></li>
  321.             <li><a class="dropdown-item rounded-2" href="./calories.html">TRACK CALORIES</a></li>
  322.             <li><a class="dropdown-item rounded-2" href="./goal.html">KNOW YOUR GOAL</a></li>
  323.             <li><a class="dropdown-item rounded-2" href="./basic_redirect.html">STORE YOUR DETAILS</a></li>
  324.           </ul>
  325.         </div>
  326.         <a href="./about.html">ABOUT US</a>
  327.         <a href="./contacts.html">CONTACT US</a>
  328.       </div>
  329.     </nav>
  330.   </header>
  331.   <main>
  332.     <div class="main-box">
  333.       <div class="main-text-box">
  334.         <h2>Transform yourself today.</h2>
  335.         <p id="main-para">"Welcome to Fitify, your ultimate fitness companion! We are dedicated to helping you on your fitness journey by providing powerful tools to track your progress. With our user-friendly interface achieving your health and fitness goals has never
  336.           been easier. Join our community today and take the first step towards a healthier, fitter you!"</p>
  337.         <button id="to-features">GET FIT</button>
  338.       </div>
  339.       <div class="main-image-box"> //This div will be hidden on mobile devices
  340.         <img src="./nutri.webp" id="main-img" alt="Display Image">
  341.       </div>
  342.     </div>
  343.     <div class="feature-box">
  344.       <div class="row">
  345.         <div class="card">
  346.           <i class="fa-sharp fa-solid fa-dumbbell"></i>
  347.           <div class="card-body">
  348.             <h5 class="card-title">CALCULATE YOUR BMI</h5>
  349.             <p class="card-text">Calculate your Body Mass Index (BMI) to know your health status right away.</p><br>
  350.             <a href="./bmi.html" class="cards-btn">CALCULATE</a>
  351.           </div>
  352.         </div>
  353.         <div class="card">
  354.           <i class="fa-solid fa-utensils"></i>
  355.           <div class="card-body">
  356.             <h5 class="card-title">TRACK YOUR CALORIES</h5>
  357.             <p class="card-text">Track your calories for the day and know how much you consumed today.</p>
  358.             <a href="./calories.html" class="cards-btn">TRACK NOW</a>
  359.           </div>
  360.         </div>
  361.         <div class="card">
  362.           <i class="fa-solid fa-person-dress"></i>
  363.           <div class="card-body">
  364.             <h5 class="card-title">YOUR IDEAL WEIGHT</h5>
  365.             <p class="card-text">Calculate your ideal weight by entering your measurements.</p><br>
  366.             <a href="./goal.html" class="cards-btn" id="goal-btn">KNOW YOUR GOAL</a>
  367.           </div>
  368.         </div>
  369.         <div class="card">
  370.           <i class="fa-solid fa-info"></i>
  371.           <div class="card-body">
  372.             <h5 class="card-title">STORE YOUR BASIC DETAILS</h5>
  373.             <p class="card-text">Keep a log of your basic information in our secure database.</p>
  374.             <a href="./basic_redirect.html" class="cards-btn">STORE DETAILS</a>
  375.           </div>
  376.         </div>
  377.       </div>
  378.     </div>
  379.   </main>
  380.   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
  381.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.min.js" integrity="sha384-heAjqF+bCxXpCWLa6Zhcp4fu20XoNIA98ecBC1YkdXhszjoejr5y9Q77hIrv8R9i" crossorigin="anonymous"></script>
  382.   <script>
  383.     const button = document.getElementById('to-features');
  384.     window.onload = function() {
  385.       var para = document.getElementById("main-para");
  386.       var para_text = para.innerHTML;
  387.       var speed = 15;
  388.       var i = 0;
  389.       para.innerHTML = "";
  391.       function typeWriter_para() {
  392.         if (i < para_text.length) {
  393.           para.innerHTML += para_text.charAt(i);
  394.           i++;
  395.           setTimeout(typeWriter_para, speed);
  396.         }
  397.       }
  398.       setTimeout(typeWriter_para, 100); // Delay before starting the paragraph animation
  399.       para.style.visibility = "visible"; // Make the paragraph visible
  400.     };
  401.     const feature_box = document.querySelector('.feature-box');
  402.     button.addEventListener('click', function() {
  403.       feature_box.scrollIntoView();
  404.     });
  405.   </script>
  406. </body>
  408. </html>
css

1条答案

按热度按时间
mi7gmzs6

mi7gmzs61#

您可以通过使用媒体查询和纵横比来处理响应问题。请参见下面的语法。根据纵横比，您的Web应用程序的响应速度将通过使用以下格式来覆盖。

  1. @media (min-aspect-ratio: 2/3) and (orientation: portrait) {}
  2.  @media (min-aspect-ratio: 2/3) and (orientation: landscape) {}
  3.  @media (min-aspect-ratio: 9/16) and (orientation: landscape) {}
  4.  @media (min-aspect-ratio: 9/16) and (orientation: portrait) {}
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com