Как мне сделать мой сайт на мобильном устройстве? - PullRequest
Новая
       1

Как мне сделать мой сайт на мобильном устройстве?

0 голосов
/ 19 марта 2020

Так что в какой-то момент при создании моей домашней страницы у меня все красиво сложилось на мобильном телефоне. Где-то в пути (я думаю, что после добавления навигационной панели и работы с моим общим кодом) мой сайт на мобильных устройствах перестает красиво складываться и теперь является беспорядочным беспорядком. Я относительно новичок в CSS, и хотя мне нравится, как выглядит мой сайт, я чувствую, что мой код не очень чистый. Мог бы действительно использовать некоторую помощь как с мобильным стекированием, так и с очисткой кода в целом. Я работаю полный рабочий день в сфере здравоохранения (который, как вы можете себе представить, сейчас довольно сумасшедший из-за COVID), поэтому мое единственное время для изучения и устранения неполадок - после работы над clini c, и я был бы признателен за любую дополнительную помощь, которую я могу получить! Вот мой кодовый блок: 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;
      }

1 Ответ

0 голосов
/ 19 марта 2020

Из-за бесконечных возможностей в css, я не могу сказать вам конкретно, как это исправить. Но если вы нажмете клавишу F12 во время использования приложения, вы откроете инструменты разработчика и сможете щелкнуть «Переключить панель инструментов устройства» в верхнем левом углу этой панели (CTR + SHIFT + M), а затем переключиться между 3 (L , M, S) мобильные устройства, чтобы увидеть, как это будет выглядеть. Хорошее понимание Margin, Border и Padding облегчит исправление.

Bootstrap также предлагает классы, которые делают этот тип утомительной работы немного более терпимым. С сеткой Bootstrap вы можете размещать элементы по-разному в зависимости от размера окна / устройства. Я настоятельно рекомендую изучить Bootstrap, если вы планируете больше заниматься веб-разработкой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...