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

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

0 голосов
/ 03 мая 2018

Я знаю, что я не очень хорош в html5, но я активно учусь. У меня были проблемы с адаптацией моего веб-сайта в мобильном браузере. Я смог сделать его адаптивным в веб-браузере на компьютере.

Может кто-нибудь сказать мне, как я могу сделать его отзывчивым и объяснить мне, как эта функция работает?

Большое спасибо! 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cayla.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />

</head>

<body>
    <div class="img1">

        <div class="one">
            <div style="width:60%;background-color:#D8D8D8;margin-bottom:3%;">
              <!--  <svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="612px" viewBox="0 0 792 612" style="" xml:space="preserve">-->
                <svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 612" style="" xml:space="preserve">
    <style type="text/css">

      .st0{fill:none;stroke:#FDFDFD;}
      .st1{fill:none;stroke:#12100B;stroke-width:0.75;}

    </style>
    <path class="st1 GIfDAJwL_0" d="M864,204"></path>
    <path class="st0 GIfDAJwL_1" d="M426.357,291.773c-0.041-12.345-1.707-22.665-4.352-34.209c-8.392,4.478-13.649,40.339-13.631,49.989
      c0.034,17.964-1.063,41.607,6.963,56.455c8.124,15.025,19.178,4.285,24.85-7.853c5.971-12.777,7.685-22.798,7.881-37.559
      c-1.444,5.259-5.496,8.714-3.049,12.917c1.016-4.619,3.755-6.121,3.922-10.898c-0.027,4.104,0.264,7.119,2.795,9.768
      c1.506-5.469,3.623-13.664,3.172-17.732c-0.113,3.707-0.037,7.516,0.22,11.143c3.36-6.947,4.348-16.811,6.454-24.181
      c3.606,53.796,0.22,113.64,0.22,166.148c1.091-17.07-3.938-34.533-3.938-51.979c-0.004-25.875,1.787-50.906,3.004-76.584
      c1.389-29.324,11.799-55.735,15.406-85.365c3.484-28.619,3.25-56.957,3.25-85.942c0,20.127-3.17,40.157-3.85,60.265
      c-0.672,19.88-0.455,43.321,10.324,60.186c4.844,7.576,9.213,12.045,16.535,5.148c3.479-3.277,4.025-6.196,4.052-11.49
      c-0.541,3.818-2.303,8.03-1.189,11.883c0.229-3.271-0.647-7.569,1.188-10.189c0.972,3.261,0.131,11.245,5.246,6.779
      c3.205-2.798,8.143-3.789,12.846-2.784c2.629,0.561,16.42,6.282,18.992,7.717c13.344,7.443,38.292-0.675,52.428-1.938
      c19.37-1.731,18.325-3.814,37.57-6.666"></path>
    <style>.GIfDAJwL_0{stroke-dasharray:0 2;stroke-dashoffset:1;animation:GIfDAJwL_draw_0 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}.GIfDAJwL_1{stroke-dasharray:1094 1096;stroke-dashoffset:1095;animation:GIfDAJwL_draw_1 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}@keyframes GIfDAJwL_draw{100%{stroke-dashoffset:0;}}@keyframes GIfDAJwL_fade{0%{stroke-opacity:1;}95.77464788732394%{stroke-opacity:1;}100%{stroke-opacity:0;}}@keyframes GIfDAJwL_draw_0{7.042253521126761%{stroke-dashoffset: 1}36.15023474178404%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}@keyframes GIfDAJwL_draw_1{21.596244131455396%{stroke-dashoffset: 1095}50.70422535211267%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}
    </style></svg>
                <span class="border">
            </span>
            </div>
        </div>
        <section class="section sec1">
            <h1>About Me</h1>
            <hr size="1" color="#666" align="center" >
            <p>
                Lorem ipsum dolor sit amet, enim accumsan vim ut, unum noluisse phaedrum ea duo, ne quo voluptaria argumentum. Mel volumus adipisci ne. Eu eos dolorem salutandi euripidis. Vix perfecto deseruisse ex, option scriptorem an ius.
            </p>
        </section>
        <div class="img2">
            <div class="txt">
                <span class="border trans">
            </span>
            </div>
        </div>
        <section class="section sec2">
            <h2>Portfolio</h2>
            <hr size="1" color="#FFFFFF" align="center">

            <div class="row">
                <div class="column">
                    <img src="aki0.png" alt="aki">
                </div>
                <div class="column">
                    <video  controls>
    <source src="OpenVertices.mp4" type="video/mp4">
  </video>
                </div>
                <div class="column">
                    <a href="https://youtu.be/SfSKYra8aZw"><img src="Lancer.png" alt="Lancer"></a>
                </div>
                <div class="column">
                    <img src="Naturalthinker.jpg" alt="NT">
                </div>
                <div class="column">
                    <video controls>
  <source src="Circleoflife.mp4" type="video/mp4">
</video>
                </div>
                <div class="column">
                    <img src="Essentiel.png" alt="Es">
                </div>
                <div class="column">
                    <img src="Japan.png" alt="Es">
                </div>
                <div class="column">
                    <img src="black.jpg" alt="Es">
                </div>
                <div class="column">
                    <img src="content.jpg" alt="Es">
                </div>
                <div class="column">
                    <img src="icons.jpg" alt="Es">
                </div>
                <div class="column">
                    <img src="ss15.png" alt="Es">
                </div>
                <div class="column">
                    <img src="mens.jpg" alt="Es">
                </div>

        </section>
        <div class="img3">

        </div>
        </div>
        <section class="section sec3">
            <h1>      Contact Me</h1>
            <hr size="1" color="#666" align="center">
            <ul class="fa-ul">
                <li><i class="far fa-envelope fa-2x"></i>
                    <div>info@hello.com</div>
                </li>
                <li><i class="fas fa-mobile-alt fa-2x"></i>
                    <div>514.123.4567</div>
                </li>
                <li><i class="fas fa-map-marker-alt fa-2x"></i></i>
                    <div>Montreal, Canada.</div>
                </li>

            </ul>





        </section>
        <section class="section sec4">
            <h3>
        Copyright @2017.
      </h3>
        </section>

</body>

</html>





  body, html
{
    height: 100%;
    margin: 0;
    color: #666;
}
.img1,.img2,.img3
{
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.img1
{
    /*background-image: url('../Images/background.jpg');*/
    background-color: #D8D8D8;
    min-height:100%;
}

svg.sign {
align-items: center;
margin-top: 50%;
margin-left: 50%;
margin-right:200%;
margin-bottom: 50%;
}

.img2
{
    background-image: url('../color.jpg');
    min-height:400px;
    opacity:0.70;
}
.img3
{
    background-image: url('../me.jpg');
    min-height:400px;
    opacity:0.70;
}
.section
{
    text-align: center;
    padding: 50px 80px;
}
.sec1
{
    background-color: #f4f4f4;
    color: #666;
    min-height:200px;
    min-width: 300px;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.sec2
{
    background-color: #282e34;
    color: #ddd;
    min-height:2250px;
}

.sec3{
  background-color: #f4f4f4;
  color: #666;
  min-height:200px;
  align-content: center;
}

.sec4{
  background-color: #f4f4f4;
  color: #666;
  min-height:20px;
  align-content: center;
}

h1{
  text-transform: uppercase;
  font-family:futurastf;
  font-size:1.25em;
  font-family:sans-serif;
  letter-spacing: 3px;
  color:#666;
  text-align: center;
}

h2{
  text-transform: uppercase;
  font-family:futurastf;
  font-size:18px;
  font-family:sans-serif;
  letter-spacing: 3px;
  color:#FFFFFF;
  text-align: center;
}

h3{
font-size:13px;
font-family:sans-serif;
 font-family:futurastf;
 letter-spacing:2px;
 color:#666;
 align-content: center;
 margin-right: auto;
 margin-left:auto;
 text-align: center;

}

p{
   overflow:auto;
  font-size:13px;
  font-family:sans-serif;
   font-family:futurastf;
   letter-spacing:2px;
   color:#666;
   line-height: 30px;
   text-align:center;
   margin-right: auto;
   margin-left:auto;

}
.txt
{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 27px;
    letter-spacing: 8px;
    text-transform:uppercase;
}
.txt .border
{
    background-color: #111;
    color: #fff;
    padding: 20px;

}
.txt .border.trans{
    background-color: transparent;
}
/* Three image containers (use 25% for four, and 50% for two, etc)*/
.column {
  display:inline-block;
  float: center;
  width: 48%;
  padding: 5px;
}
/* NEW */
.column img{

 max-width:100%;
  height:auto;
}
/* NEW */
.column video{

 max-width:100%;
  height:auto;
}
hr{
  width: 40%;
}

.fa-ul{
  list-style-type: none;
  padding-left: 0;
  margin-left:0;
}

/* NEW */
@media only screen and (max-width: 900px) {
  .column {
   display:inline-block;
    float: center;
    width: 100%;
    padding: 5px;
  }

  hr{
    width: 100%;
  }

  .sec2
  {
      background-color: #282e34;
      color: #ddd;
      min-height:900px;
  }

}


/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
     .img-wrapper {
        width: 49.75%;
     }
     .img-wrapper2 {
        margin-left:.5%;
     }
     .img-wrapper3 {
        margin-top:.5%;
     }
     .img-wrapper4 {
        margin-top:.5%;
        margin-left:.5%;
     }

   .img-wrapper5 {
        width: 49.75%;
     }
   .img-wrapper6 {
    width: 49.75%;
   }

   .img-wrapper7 {
        width: 49.75%;
     }


ul {
  list-style-type: none;
  color: #666;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

li {
  clear:both;
}

li i{
  font-size:40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

li div{
  float:center;
  margin-left: auto;
  margin-right: auto;
  line-height: 60px;
  text-align: center;

}

Ответы [ 3 ]

0 голосов
/ 03 мая 2018

Моя рекомендация: используйте фреймворк css, например bootstrap.

https://getbootstrap.com/docs/4.1/getting-started/introduction/

или

Если вы не хотите использовать Framework, можете использовать медиа-запросы.

/ * мобильные телефоны - 320x480 пикселей * / 

@media screen and (max-width: 480px) {
  h1{
    color: blue;
  }
}

/ * Таблетки - 768x1024px * / 

@media screen and (max-width: 1024px) {
  h1{
    color: red;
  }
}

И попробуйте проверить адаптивный вид, используя http://ami.responsivedesign.is/

0 голосов
/ 03 мая 2018

Вы можете использовать две вещи, чтобы сделать сайт отзывчивым.

  1. Bootstrap Framework, чтобы сделать его отзывчивым для всех больших и маленьких устройства. Смотри их документацию Ссылка
  2. Медиа-запросы Ссылка
0 голосов
/ 03 мая 2018

Вы можете сделать сайт отзывчивым, используя экранные медиа-запросы и добавить метатег в заголовке HTML-документа.

медиа-запросы работают так: вы добавляете размер экрана, а затем стили внутри него 

@media only screen and (max-width: **your screen size here**) {
  div {
    color: green;
  }
}

Подробнее об этом можно прочитать здесь:

Адаптивный дизайн

Использование медиазапросов

некоторые размеры экрана

...