Управление тегами Html br

#html #css #responsive-design

#HTML #css #адаптивный дизайн

Вопрос:

У меня есть страница, и я хочу <br> , чтобы тег внутри класса div .this работал при просмотре страницы на мобильном устройстве

и не работать при просмотре на ПК — компьютере

 <html>
  <header>
    <title>This is title</title></header>
  <body>
    Hello world
    <div class="this">
      <br>
      <br>
    </div>
    <span>ok</span>
  </body>
</html>

Ответ №1:

Простое решение (может быть расширено по желанию): используйте медиа-запрос, который скрывает br тег выше определенной ширины:

 @media screen and (min-width: 600px) {
  .this br {
    display: none;
  }
}

 Hello world
<div class="this">
  <br>
  <br>
</div>
<span>ok</span>

1. Это сработает, просто измените максимальную ширину на минимальную ширину. В противном случае теперь происходит обратное.

2. @Andrew Вы правы, я изменил его соответствующим образом… — спасибо, что указали на это!

Ответ №2:

Это может быть достигнуто с помощью медиа-запросов css:

 .this br {
    display: none;
}
    
@media (max-width : 600px) {
    .this br {
        display: block;
    }
}

Здесь можно привести аргументы в пользу разрешения (600 пикселей). Если вы хотите быть абсолютно уверены, что это влияет только на мобильные телефоны, вам следует использовать библиотеку php, такую как MobileDetect, чтобы определить, находится ли пользователь на мобильном устройстве, и затем загрузить дополнительный файл css, отображающий <br> теги.

Ответ №3:

Вы можете решить эту проблему с @media screen помощью, показать его в мобильном размере и скрыть его в больших размерах

 <html>
<header><title>This is title</title></header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
  .this br{display: none;}

  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .this br{display: block;}
  }
</style>
<body>
Hello world
<div class="this">
<br>
</div>
<span>ok</span>
</body>
</html>