Тестирование Resposive Screens | Twitter Bootstrap

Привет друзья просто проверяют отзывчивость моего сайта.Тестирование Resposive Screens | Twitter Bootstrap

Итак, я сделал базовый код, надеясь, что заголовки на страницах будут реагировать на разные размеры экрана.

вот HTML код,

<!-- Custom styles for this template --> 

<link rel="stylesheet" type="text/css" href="style.css"> 
<title>Testing Responsive Screens</title> 
</head> 

<body> 

<div class='divHeader'><!-- Contact Us title Start --> 

    <div class="container"><!--container--> 

     <div class="row"><!-- Contact Us title --> 

      <!-- LARGE SCREEN TITLE --> 

      <div class='LGS'> 

       <div class='col-lg-4'></div> 

       <div class='col-lg-4 divHeaderContent text-center'> 
        <h1><br>Contact Us</h1> 
       </div> 

       <div class='col-lg-4'></div> 

      </div> 

      <!-- MEDIUM SCREEN TITLE --> 

      <div class='MDS'> 

       <div class='col-md-4'></div> 

       <div class='col-md-4 divHeaderContent text-center'> 
        <h2><br>Contact Us</h2> 
       </div> 

       <div class='col-md-4'></div> 

      </div> 

      <!-- SMALL SCREEN TITLE --> 

      <div class='SMS'> 

       <div class='col-sm-4'></div> 

       <div class='col-sm-4 divHeaderContent text-center'> 
        <h3><br>Contact Us</h3> 
       </div> 

       <div class='col-sm-4'></div> 

      </div> 

      <!-- EXTRA SMALL 1 SCREEN TITLE --> 

      <div class="XSS1"> 

       <div class='col-xs-4'></div> 

       <div class='col-xs-4 divHeaderContent text-center'> 
        <h4><br>Contact Us</h4> 
       </div> 

       <div class='col-xs-4'></div> 

      </div> 

      <!-- EXTRA SMALL 2 SCREEN TITLE --> 

      <div class="XSS2"> 

       <div class='col-xs-4'></div> 

       <div class='col-xs-4 divHeaderContent text-center'> 
        <h6><br>Contact Us</h6> 
       </div> 

       <div class='col-xs-4'></div> 

      </div> 

     </div><!-- End of Contact Us title --> 

    </div><!--End of container--> 

</div> 

</body> 

</html>

& простой CSS,

@media (min-width: 1200px) { 
    /* ================== GENERAL RULE ===================== */ 
    .MDS, .SMS, .XSS1, .XSS2{ 
     display: none;  
    } 
} 

    /* Landscape tablets and medium desktops */ 
     @media (min-width: 992px) and (max-width: 1199px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .SMS, .XSS1, .XSS2{ 
      display: none;  
     } 
    } 

    /* Portrait tablets and small desktops */ 
    @media (min-width: 768px) and (max-width: 991px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .MDS, .XSS1, .XSS2{ 
      display: none;  
     } 
    } 

    /* Landscape phones and portrait tablets */ 
    @media (max-width: 767px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .MDS, .SMS, .XSS2{ 
      display: none;  
     } 
    } 

    /* Portrait phones and smaller */ 
    @media (max-width: 480px) { 
     /* ================== GENERAL RULE ===================== */ 
     .LGS, .MDS, .SMS, .XSS1{ 
      display: none;  
     } 
    }

Классы предназначены для каждого размера экрана типа.

Проблема возникает в самом маленьком размере экрана. Название просто не отображается. Помогите мне, люди, дайте мне знать, я ошибаюсь.

Спасибо!

источник

2016-06-03 Gaurav

Проблема заключается в том, что вы не указали минимальную ширину для Landscape phones and portrait tablets. Таким образом, при 767px и меньше XSS2 все равно скрывается (даже в «Портретных телефонах и меньшем» случае). Существует исправление:

/* Landscape phones and portrait tablets */ 
@media (min-width: 481px) and (max-width: 767px) { 
    /* ================== GENERAL RULE ===================== */ 
    .LGS, .MDS, .SMS, .XSS2{ 
     display: none;  
    } 
}

источник

2016-06-03 09:34:45 wander

спасибо, приятель, это сработало !! – Gaurav

Добро пожаловать :) – wander

Смотрите, если это работает для вас: http://codepen.io/panchroma/pen/LZVyPQ, это немного легче следовать тому, что происходит на разных видовых, если вы скрываете все пользовательские классы, а затем указать для ДИСПЛЕЯ у для каждая точка останова, в отличие от указания , которая скрывает на каждой точке останова.

.LGS, .MDS, .SMS,.XSS1, .XSS2{display:none;} 

@media (max-width: 480px) { 
    .XSS2{ 
    display:block; 
    } 
} 

@media (min-width: 481px) and (max-width: 767px) { 
    .XSS1{ 
    display:block; 
    } 
} 

@media (min-width: 768px) and (max-width: 991px) { 
    .SMS{ 
    display:block; 
    } 
} 

@media (min-width: 992px) and (max-width: 1199px) { 
    .MDS{ 
    display:block; 
    } 
} 

@media (min-width: 1200px) { 
    .LGS{ 
    display:block; 
    } 
}

В случае, если вы не знаете, Bootstrap имеет собственные адаптивные утилиты, которые могут достичь некоторых из того, что вы ищете: http://getbootstrap.com/css/#responsive-utilities

Также не ясно из вашего кода, если у Вас есть включают в себя viewport meta tag в голове вашего документа, если вам не нужно что-то вроде

<head> 
... 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
... 
</head>

удачи!

источник

2016-06-03 16:57:49

Тестирование Resposive Screens | Twitter Bootstrap

ответ

Смежные вопросы