Question

每当用户减小窗口大小时，文本会根据窗口大小而变化。但是当我减小窗口大小时，它会转到图像上。我尝试了媒体查询，但它总是显示相同。我使用VW和vh根据窗口大小调整大小。

我是这样的。如何解决这个错误。我使用的媒体查询是

@media screen and (max-width: 760em) and (max-height: 780em){
    .text {
        font-size:10em;
    }

如何解决这个问题。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>deyaPay</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href='https://fonts.googleapis.com/css?family=Passion One' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Palanquin Dark' rel='stylesheet'>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">
  body {
      font: 400 15px Lato, sans-serif;
      line-height: 1.8;

  }
  .carousel-control.right, .carousel-control.left {
      background-image:none;
      color: #32CD32;
  }
  .carousel-indicators li {
      border-color: #000000;
  }
  .carousel-indicators li.active {
      background-color: #32CD32;
  }

  .button {
    background-color:#000000;
    border:black;
    text-align:center;
    text-decoration:none;
    display:inline-block;
    font-size:20px;
    margin:10px 2px;
    width:160px;
    height:20px;





  }
  /*.text {
    font-size: 160%;
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 180%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }*/

  .button1 {
    border: 1px solid black;

    text-align:center;
    text-decoration:none;
    display:inline-block;
    font-size:20px;
    margin:10px 2px;
     width:160px;
     height:20px;





  }

    @media screen and (max-width: 803px) {
    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
}
    img {
      width:100%,
      height:auto;

    }
    .col-sm-8 {

      padding: 60px 50px;
  }
  @media screen and (max-width: 760em) and (max-height: 780em){
    .text {
        font-size:10em;
    }

    /*@media screen and (max-width: 500px) {
    .text {
        font-size: 70px;
    }*/

  /*@media screen and (max-width:760em) {
    .img {
        font-size: 150px;
    }*/
    @media screen and (max-width: 803em) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top" style = "background:#FFFFFF">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <!-- <img src="Assets/img/deyapayiconandroid@3x.png" alt="logo" style="width:60px;"><br> -->
       <h1 style = "font-family:Passion One;color:#3393E7;">deyaPay</h1>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="signup.html" class = "button" style ="color:white;text-align:center;padding:15px 20px 30px;">Signup</a></li>
        <li><a href="login.html" class="button1" style ="text-align:center;padding:15px 20px 30px;"> Login</a></li>
      </ul> 
    </div>
  </div>
</nav>

<div class = "container-fluid" style = "background:#FFFFFF ">
   <div class = "row">
       <div class="col-sm-8"> 
         <h2 style="margin-top: 100px; margin-left:50px;font-family:Palanquin Dark; font-size:55px" >
            Pay for it anyway you want</br>
            with deyaPay </h2>
 <button type = "button" style = "background-color:#4CAF50; font-size:20px;width:200px;height:40px;margin-left:50px;margin-top:20px;text-align=center;color:white;border:none;display:inline-block"> Get Started </button>
    </div>

<div class="col-sm-4">
       <img src="Assets/img/deywalletbg.png" class="img-responsive" width="300" height="250" style=" margin-top: 150px">

 </div>
    </div>
 </div> 
 <div id="myCarousel" class="carousel slide text-center" data-ride="carousel" >
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active" style="background-color: #F2F2F2">
    <div class = "container-fluid"> 
    <div class = "row">
      <div class = "col-sm-4">
     <img src="Assets/img/first.png" class="img-responsive" width="300" height="250" style=" margin-left:180px;margin-top: 40px;">   
   </div>
   <div class="col-sm-8"> 
         <h2 class = "text" style = " font-family: 'Fira Sans Extra Condensed';font-size:3vw;text-align: left;margin-left: 60px;margin-top: 100px;">
            New Generation </br>
            Currency Wallet<br>
            To save and Secure Payment Application</br>
            We delighted o Support users for faster</br>
            payments and their valuable time
         </h2>

    </div>
  </div>
   </div>
    </div>
    <div class="item" style="background-color: #F2F2F2">
        <div class="row">
            <div class="col-sm-4">
        <img src="Assets/img/slide2.png" class="img-responsive" width="450" height="250" style=" margin-left:100px;margin-top: 40px;">   
     </div> 
      <div class = "col-sm-8">
        <h2 style = " font-family: 'Fira Sans Extra Condensed';font-size:35px;text-align: left;margin-left: 60px;margin-top: 100px;">
            New Generation </br>
            Currency Wallet<br>
            To save and Secure Payment Application</br>
            We delighted o Support users for faster</br>
            payments and their valuable time
         </h2>
      </div>
    </div>
    </div>
  </div>  
    <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
<div class="container-fluid" style="background-color:#F0F8FF ">
    <div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="Assets/img/bitcoin.png" class = "img-circle" alt="Paris" width="180">
        <p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="Assets/img/bitcoin.png" alt="New York" width="180">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="Assets/img/bitcoin.png" alt="San Francisco" width="180">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
  </div> 
</div>

Answer 1

图像重叠，因为它左边有一个边距作为内联样式。您可以删除该内联样式并使用媒体查询覆盖它。请注意您的文本也具有可能导致问题的内联样式，因为您无法使用媒体查询覆盖它。

此外，如果您想知道只有一个幻灯片文本更改，那么您的第二张幻灯片上没有.text类。

如何根据浏览器窗口大小缩放文本

1 个答案: