如何使用媒体查询使网站适合移动视图

Question

我正在为响应式网站使用媒体查询。但是，只要浏览器窗口大小减小，媒体查询就会根据大小应用。但是，只要将浏览器大小设置为移动视图，媒体查询就不会应用于网站。如何编写这些查询？这是我的 css 和 html 。只要小于 760px，内容应该是右边距。该怎么做？

@media all screen and (min-width:410) and (max-width:760px) {
  .image2 {
    display: flex;
    flex-wrap: wrap;
    margin-right: 1000%
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>



<div class="container-fluid text-center">
  <h3 class="text1" style="margin-top: 30px; font-family: 'Fira Sans Condensed';font-size:60px;"> Multi Currency Wallet</h3> <br> <br>
  <div class="row text-center ">
    <div class="col-sm-4">
      <img src="Assets/img/deyapay.png" class="image2" alt="Paris" style="width:20%; height:30%;"><br>
      <h4 style="font-family: 'Fira Sans Condensed';margin-right:20px">deyaCoin</h4>
      <p style="text-align:justify; margin-left: 38%;float:left;">
        Get Paid instantly. The moment you sell something is the moment you get paid.</p>
    </div>
    <div class="col-sm-4">
      <img src="Assets/img/creditcard.png" class="image2" alt="New York" style="width: 25% ;height:30%;"><br>
      <h4 style="font-family: 'Fira Sans Condensed';">Credit/Debit</h4>
      <p style="text-align:justify; margin-left: 38%;float:left">
        we takes the user card details and process the payment transaction.
      </p>

    </div>
    <div class="col-sm-4">
      <img src="Assets/img/bank.png" class="image2" alt="San Francisco" style="width:20%;height:30%;"><br>
      <h4 style="font-family: 'Fira Sans Condensed';margin-right:30px;">ACH</h4>
      <p style="text-align:justify; margin-left: 38%;float:left">
        We collect the bank details and process your payment in secure manner.</p>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-sm-4">
      <img src="Assets/img/group.png" alt="Paris" class="image2" style="width:25%; height:30%;"><br>
      <h4 style="font-family: 'Fira Sans Condensed'; margin-left: 20px;">Share Expenses</h4>
      <p style="text-align:justify;margin-left: 38%;float:left;">
        Jack, Jane and John go on a skiing weekend together. Jack pays for the ski-hire;Jane pays the hotel; John pays for dinner.</p>
    </div>
    <div class="col-sm-4">
      <img src="Assets/img/money.png" alt="Paris" class="image2" style="width:25%; height:30%;"><br>
      <h4 style="font-family: 'Fira Sans Condensed';margin-left: 10px">ReceiveMoney</h4>
      <p style="text-align:justify; margin-left: 38%;float:left;">
        You can request money among your family, friends, contacts, or split money among your contacts to receive money from.</p>
    </div>
  </div>
</div> <br><br>

Answer 1

您在min-width 中忘记了px 并且不要使用all

见小提琴：https://jsfiddle.net/6180Lub2/

    @media screen and (max-width:760px ) and (min-width:410px)  {
             .image2 {
            display: flex;
            flex-wrap: wrap;
            margin-right: 1000%
        }

          }


         

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <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>

    <div class="container-fluid text-center">
          <h3 class = "text1" style = "margin-top: 30px; font-family: 'Fira Sans Condensed';font-size:60px;"> Multi Currency Wallet</h3> <br> <br>
          <div class="row text-center ">
             <div class="col-sm-4">
                <img src="Assets/img/deyapay.png" class = "image2" alt="Paris" 
                 style = "width:20%; height:30%;" ><br>
                 <h4 style="font-family: 'Fira Sans Condensed';margin-right:20px">deyaCoin</h4>
                <p style="text-align:justify; margin-left: 38%;float:left;" >  
                     Get Paid instantly.
                   The moment you sell something 
                     is the moment you get paid.</p>
              </div>
            <div class="col-sm-4">
                <img src="Assets/img/creditcard.png" class = "image2" alt="New York" 
                     style = "width: 25% ;height:30%;" ><br>
                <h4 style="font-family: 'Fira Sans Condensed';">Credit/Debit</h4>
                <p style="text-align:justify; margin-left: 38%;float:left">  
                  we takes the user card details
                  and process the payment transaction.
                </p>

              </div>
            <div class="col-sm-4">
                <img src="Assets/img/bank.png" class = "image2" alt="San Francisco" 
                style="width:20%;height:30%;"><br>
                <h4 style="font-family: 'Fira Sans Condensed';margin-right:30px;">ACH</h4>
                <p style="text-align:justify; margin-left: 38%;float:left">  
                We collect the bank details and
                process your payment in secure manner.</p>
              </div>
          </div> 
          <div class="row text-center">
             <div class = "col-sm-4">
               <img src="Assets/img/group.png"  alt="Paris" class = "image2" 
                 style = "width:25%; height:30%;" ><br>
                 <h4 style="font-family: 'Fira Sans Condensed'; margin-left: 20px;">Share Expenses</h4>
                <p style="text-align:justify;margin-left: 38%;float:left;" >  
                  Jack, Jane and John go on a skiing 
                  weekend together. Jack pays for the
                  ski-hire;Jane pays the hotel;
                  John pays for dinner.</p>
              </div>
              <div class = "col-sm-4">
               <img src="Assets/img/money.png" alt="Paris"  class="image2" 
                 style = "width:25%; height:30%;" ><br>
                 <h4 style="font-family: 'Fira Sans Condensed';margin-left: 10px">ReceiveMoney</h4>
                <p style="text-align:justify; margin-left: 38%;float:left;" >  
                  You can request money among 
                  your family, friends, contacts,
                  or split money among your contacts
                  to receive money from.</p>
              </div>
            </div>         
        </div> <br><br>