如何使我的整个网站在移动设备上响应？

问题描述 投票：0回答：4

我知道我不太擅长 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>[email protected]</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;

}
html twitter-bootstrap css media-queries
4个回答
3
投票

我的建议是，使用像 bootstrap 这样的 css 框架。

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

或

如果你不想使用框架，可以使用媒体查询。

/* 手机 - 320x480px */

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

/* 平板电脑 - 768x1024px */

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

并尝试使用检查响应视图 http://ami.responsivedesign.is/

3
投票

您可以使用两件事来使网站响应。

  1. Bootstrap Framework 使其能够响应所有大小 设备。请参阅他们的文档链接
  2. 媒体查询链接
2
投票

您可以使用屏幕媒体查询使网站响应并在 html 文档的头部添加元标记。

媒体查询的工作原理如下：添加屏幕尺寸，然后添加其中的样式

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

您可以在这里阅读更多相关信息：

响应式设计

使用媒体查询

一些屏幕尺寸

0
投票

您可以使用 Bootstrap、Tailwind 或其他 CSS 框架（有很多替代方案）

或者，如果您想自己编写自定义 CSS，也可以使用媒体查询。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.