时间戳

首页 > 解决方案 > 如何在移动设备上制作我的网站堆栈？

html - 如何在移动设备上制作我的网站堆栈？

问题描述

所以在制作我的主页时，我把所有东西都很好地堆放在了移动设备上。一路上的某个地方（我想在添加导航栏并弄乱我的整体代码之后）我的移动网站不再很好地堆叠，现在是一团糟。我对 CSS 比较陌生，虽然我喜欢我的网站的外观，但我觉得我的代码不是很干净。一般来说，确实可以在移动堆栈和代码清理方面使用一些帮助。我全职从事医疗保健工作（您可以想象现在由于 COVID 非常疯狂），所以我学习和解决问题的唯一时间是在诊所工作之后，如果我能得到任何额外的帮助，我将不胜感激！这是我的代码笔： https ://codepen.io/purplexmoss/pen/QWbxopN

<!--DOCTYPE html-->
<html lang="en">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="width=768" name="viewport">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2:400,600|Roboto+Mono:400,700&display=swap" rel="stylesheet">
<style type="text/css">
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%);
  border: none;
  border-radius: 18px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%);
}
::-webkit-scrollbar-thumb:active {
  background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%);
}
::-webkit-scrollbar-track {
  background: #c894f3;
  border: 0px none #ca9cf9;
  border-radius: 8px;
}
::-webkit-scrollbar-track:hover {
  background: #edf095;
}
::-webkit-scrollbar-track:active {
  background: #edf095;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
</style>
    <link href="home.css" type="text/css" rel="stylesheet" />
        <title>Purple x Moss</title>
</head>
<body>
    <h1>purple x m0ss</h1>

<!-- NAVBAR -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Sen&display=swap" rel="stylesheet"> 
<style>
  </style>
  </head>
  <body>

<div class="topnav"  id="myTopnav">
  <a href="#home" class="active">home</a>
  <a href="#about">about</a>
  <a href="#accessibility">accessibility</a>
  <div class="dropdown">
    <button class="dropbtn">projects
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#" class="">Link 1</a>
      <a href="#" class="">Link 2</a>
      <a href="#" class="">Link 3</a>
    </div>
  </div> 
  <a href="#about" class="nav">get in touch</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>


<!-- inspiration: https://dribbble.com/shots/3784003-Plant-description-page -->
<div class="wrap">
  <div class="card">
    <div class="card-pic-wrap">
      <img src="https://imagizer.imageshack.com/img923/8607/oZaOnm.png" alt="flowers and succulents embedded in purple moss">
    </div>
    <div class="card-content">
      <h3><span class="h3highlight">&nbsp;&nbsp;summary &raquo;&nbsp;&nbsp;</h3highlight></h3>
       <p>hi, i'm thenessa! pronounced /"tuh" "ness" uh"/<br /><br />i love coding with <b>HTML</b> & <b>CSS</b> & am actively learning <b>Javascript</b> & <b>jquery</b> while working full time in ophthalmology. as someone who works daily with patients with low vision, partial & full blindness, cataracts, macular degeneration, & degenerative retinal conditions, i am interested in making websites & technology vision accessible. our current generation has grown up with heavy usage & reliance upon phones, iPads, and laptops, & as our generation ages we will want to continue using these technologies as easily & efficiently as possible. i believe the time is now for improving adaptibility & accessibilty of tech and the web, not only for us, but for current generations and those who come after us.</p>
      <p><a href="index.html" class="">more about me</a></p>
    </div>
  </div>
</html>

/* CSS */

html, body {

      height: 100%;
    }
    body {
      background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%); 
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: "Courier New", Courier, monospace;
      font-size: 12px;
    }

    h1 {
     background: linear-gradient(to top, yellow 2%, transparent 30%);
     font-family: 'Baloo Chettan 2', cursive;
     color: #5e3c91;
     margin-top: 100px;
     margin-bottom: 50px;
     text-align: top;
     justify-content: center;
     font-size: 36px;
     }

     /* navbar */

    #mytopnav

    .topnav {
      overflow: hidden;
      border-radius: 25px;
      background: rgb(59,41,69); background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%); 
    }

    .topnav a {
      float: left;
      display: block;
      color: #ffffff;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 16px;
      border-radius: 25px;
      background: rgb(59,41,69);background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%);
    }

    .active {
      background-color: "";
      color: #ffffff;
    }

    .topnav .icon {
      display: none;
    }

    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      font-size: 16px;    
      border: none;
      outline: none;
      color: #ffffff;
      padding: 14px 16px;
      font-family: inherit;
      margin: 0;
      border-radius: 25px;
      background: rgb(59,41,69);background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%);
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: transparent;
      min-width: 160px;
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: #ffffff;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      font-size: 16px;
      background-color: #816996;
    }


    .topnav a:hover, .dropdown:hover .dropbtn {
      background: rgb(59,41,69);background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%);
      border: 2px dotted #f0ebad;
      color: #ffffff;
    }

    .dropdown-content a:hover {
      background-color: #816996;
      color: #ffffff;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    @media screen and (max-width: 600px) {
      .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
      }
      .topnav a.icon {
        float: right;
        display: block;
      }
    }

    @media screen and (max-width: 600px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
      .topnav.responsive .dropdown {float: none;}
      .topnav.responsive .dropdown-content {position: relative;}
      .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
      }
    }



    * {
      box-sizing: border-box;
    }

    .wrap {
      height: 100%; 
    }
    .card {
      display: flex;
      flex: 0 0 auto;
      background: transparent;
      max-width: 1000px;
      margin: 30px 0;
      border: 4px dotted #462278;
      border-radius: $b-r;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .card-pic-wrap {
      border-radius: $b-r 0 0 $b-r;
      width: 275px;
      flex: 0 0 auto;
      position: relative;
      background: linear-gradient(to bottom, #f5e4b5, #a19ad9);
     }
      img {
        position: relative;
        bottom: 3em;
        left: 50%;
        margin-left: -175px;
        width: 350px;
        -webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.15)));
      }
    .card-content {
      padding: 3em 4em 2em;
    }

    h3 {
      font-family: "Courier New", Courier, monospace;
      color: #70518c;
      font-weight: bold;
      font-size: 2.5em;
      border-radius: 25px;
      margin: 0 0 1em;
    }

    .h3highlight {
        background-color: #fff2ac;
        background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
        border-radius: 25px;
    }

    a {
      float: left;
      display: block;
      color: #000000;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 12px;
      border-radius: 25px;
      background-color: #f2ee74;
    }

     a:hover {
        background: #15077d;
        color: #f5e4b5;
        border: 3px dotted #f5e4b5;
      }

    @media (max-width: 790px) {
      body {
        overflow-x: hidden;
      }

标签： htmlcssmobile

解决方案

由于 css 中的无限可能性，我无法具体告诉您如何修复它。但是，如果您在使用该应用程序时按 f12，您将调出开发人员工具，您可以单击该面板左上角的“切换设备工具栏”（CTR+SHIFT+M），然后在 3（L ,M,S) 移动设备，看看它会是什么样子。对 Margin、Border 和 Padding 有一个很好的理解将使它更容易修复。

Bootstrap 还提供了一些类，使这种乏味的工作变得更容易忍受。使用 Bootstrap 网格系统，您可以根据窗口/设备的大小不同地堆叠元素。如果您打算进行更多的 Web 开发，我强烈建议您学习 Bootstrap。

推荐阅读