时间戳

首页 > 解决方案 > 如何使用媒体查询来改变位置

html - 如何使用媒体查询来改变位置

问题描述

我的网站在正常屏幕上正常工作，但在移动版本中出现了一些问题

这是我的代码：

html {
  height: 100%;
}

* {
  box-sizing: border-box
}

body {
  height: 100%;
  color: #F4f4f4;
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  background: #131313;
  font-family: 'Gloria Hallelujah', cursive;
}


/***************************************************************** ANIMAZIONI ***********************************************************************************************************************/


/* Img */

img {
  
  max-width: 600px;
  max-height: 800px;
  border: 1px solid black;
}


/* Welcome */

h1 {
  color: #fff;
  text-align: center;
  background: #131313;
  text-shadow: 1px 1px 1px red;
  border-radius: 10px 10px 10px;
  box-shadow: ;
  position: relative;
  z-index: 1;
  animation: top 1s 1s;
  animation-fill-mode: forwards;
  transform: translateY(-130px);
  border: 1px solid #0f0f0f;
}

   
/* Container & Img */

#container {
  width: auto;
  text-align: left;
  padding: 20px;
  background-color: #191919;
  color: #f3f3f3;
  font-size: 1.3em;
  border: 1px solid black;
  border-radius: 0px 0px 10px 10px;
  margin-bottom: 2%;
  box-shadow: inset 0px 0px 6px 0px aliceblue;
}

#container .intro {
  line-height: 1.5;
  word-spacing: 3px;
  letter-spacing: 2px;
  text-align: center;
}

img[src*="fras"] {
  margin-top: 1%;
}

img[src*="aka"] {
  margin-top: 4%;
}

.logo {
  float: right;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-bottom: 2%;
  margin-top: 6%;
  margin-right: 11px;
}

div#ddfumetto {
  color: #f4f4f4;
  left: 50%;
  position: absolute;
  top: 70%;
  -webkit-animation: fadein 8s;
  -moz-animation: fadein 8s;
  -ms-animation: fadein 8s;
  -o-animation: fadein 8s;
  animation: fadein 8s;
  background: #131313;
  padding: 2%;
  border-radius: 70px;
  border: 1px solid #0F0F0F;
  height: 400px;
  width: auto;
  font-size: 20px;
  line-height: 1.5;
  text-align: justify;
  letter-spacing: 1px;
  margin-right: 1.6%;
}

#desc {
  color: #f4f4f4;
  left: 50%;
  position: absolute;
  top: 145%;
  height: 400px width: 40%;
  -webkit-animation: fadein 8s;
  -moz-animation: fadein 8s;
  -ms-animation: fadein 8s;
  -o-animation: fadein 8s;
  animation: fadein 8s;
  background: #131313;
  border-radius: 80px;
  border: 1px solid #0F0F0F;
  width: auto;
  font-size: 20px;
  line-height: 1.5;
  text-align: justify;
  letter-spacing: 1px;
  margin-right: 1.6%;
  padding: 2%;
}

#desc a,
#ddfumetto a,
{
  color: #f3f3f3;
  text-decoration: none;
}

#desc a:hover,
#ddfumetto a:hover,
{
  color: #fff;
  text-decoration: underline;
}


/* Start  */

.start {
  background: #191919;
  color: #f3f3f3;
  font-size: 1.7em;
  text-align: center;
  border: 1px solid #0f0f0f;
  border-radius: 10px;
  padding-top: 77%;
  padding-bottom: 4%;
}


/****************************************************** MOBILE *****************************************/


/****************************************  300 t 600 *************/

@media screen and (max-width: 600px) and (min-width: 300px) {
  div#ddfumetto {
    /* 1st text */
    border: 0px;
    background: none;
    border-radius: 0px;
    position: relative;
  }
  #desc {
    /* 2nd text */
    border: 0px;
    background: none;
    border-radius: 0px;
  }
  .intro {
    text-align: justify;
    border: 0px;
  }
  .start {
    border: 0px;
    background: #131313;
    text-align: justify;
    line-height: 40px;
    letter-spacing: 1px;
  }
  .start>p {
    margin-top: 530%
  }
  .logo img {
    max-width: 230px;
    / object-fit: contain;
    margin-top: 5%;
  }
  h1 {
    font-size: 40px
  }
  p.intro {
    font-size: 30px;
  }
  #container {
    border: 0px;
    border-radius: 0px;
    box-shadow: none;
    background: #131313;
  }
}


/********************* 601 to 1000 *******************/

@media screen and (max-width: 1000px) and (min-width: 601px) {
  div#ddfumetto {
    /* First text */
    border: 0px;
    background: none;
    border-radius: 0px;
    position: relative;
    width: 100%;
  }
  #desc {
    /* 2nd text*/
    border: 0px;
    background: none;
    border-radius: 0px;
    position: relative;
  }
  .intro {
    text-align: justify;
    border: 0px;
  }
  .start {
    border: 0px;
    padding: 0;
    text-align: justify;
    line-height: 40px;
    letter-spacing: 1px;
    */
  }
  .start>p {
    margin-top: 140%
  }
  .logo img {
    max-width: 230px;
    object-fit: contain;
    margin-top: 5%;
  }
  h1 {
    font-size: 40px
  }
  p.intro {
    font-size: 30px;
  }
  #container {
    border: 0px;
    border-radius: 0px;
    box-shadow: none;
    background: #131313;
  }
}
<!DOCTYPE html>
<html lang="it">

<head>
  <title>
    Yeah
  </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>



  <div id="container">
    <h1>Welcome</h1>
    <p class="intro">intro one <i>bla bla bla</i> bla bla <i>"blabla"</i> </p>
    <p class="intro">scope </p>
    <p class="intro">intro site</p>
    <p class="intro">bla bla bla bla<abbr title="DD">blabla</abbr> bla bla bla bla</p>

    <!-- Img1 -->
    <div class="logo"><img src="https://i0.wp.com/frasissime.com/wp-content/uploads/2019/09/immagini-con-frasi-sul-karma.jpg?fit=1024%2C576&ssl=1">
    </div>
    <!--- Img2  -->
    <div class="logo"><img src="https://staticfanpage.akamaized.net/wp-content/uploads/sites/6/2020/02/buon-san-valentino-immagini-2.jpeg">
    </div>

    <!-- Text 1st -->
    <div id="ddfumetto">
      <p>bla bla bla bla
        <b>bla</b> bla bla bla bla Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
    </div>

    <!-- Text 2 -->
    <div id="desc">
      <p>bla bla bla bla bla bla bla bla bla Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit
        amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
    </div>
  </div>

  <!-- Start page -->
  <div class="start">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</body>

</html>

在移动设备上，我希望带有媒体查询的#ddfumetto 和#desc 基本上是可读的

但是移动模拟中的文本1和文本2重叠或工作怪异，我不知道如何解决。

标签： htmlcssmedia-queries

解决方案

你在代码中有几个问题。首先，您的媒体查询顺序错误。我还更新了媒体查询 CSS 代码中的一些部分。

我改变了你的段落css

display:contents;
    width:100%;
    position:relative;

在 div 中，我更改了您的元素位置，其中图像先是文本，然后是秒。

<div class="logo"><img src="https://i0.wp.com/frasissime.com/wp-content/uploads/2019/09/immagini-con-frasi-sul-karma.jpg?fit=1024%2C576&ssl=1">
    </div>
     <div id="ddfumetto">
      <p>bla bla bla bla
        <b>bla</b> bla bla bla bla Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
    </div>
    <!--- Img2  -->
    <div class="logo"><img src="https://staticfanpage.akamaized.net/wp-content/uploads/sites/6/2020/02/buon-san-valentino-immagini-2.jpeg">
    </div>

    <div id="desc">
      <p>bla bla bla bla bla bla bla bla bla Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit
        amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
    </div>

你可以在这里查看

https://jsfiddle.net/rm82fkL1/

推荐阅读