Как использовать медиа-запросы для подгонки сайта к мобильному представлению - PullRequest
Новая
       5

Как использовать медиа-запросы для подгонки сайта к мобильному представлению

0 голосов
/ 05 июля 2018

Я использую медиа-запросы для адаптивного сайта. Но всякий раз, когда размер окна браузера уменьшается, медиа-запросы будут применяться в соответствии с размером. Но медиа-запрос не применяется к веб-сайту, если в браузере установлен мобильный вид. Как написать эти запросы? Это мои 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>

1 Ответ

0 голосов
/ 05 июля 2018

Вы забыли px в min-width и не используете 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>
...