Html br标签控件

Question

我有一个页面，我希望 div class .this 中的 <br> 标签在移动设备上浏览该页面时起作用

并且在 pc - 计算机上浏览时无法工作

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

Answer 1

这可以通过 css 媒体查询来实现：

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

这里可以讨论分辨率 (600px)。如果你想 absolutely 确定它只影响手机，你应该使用像 MobileDetect 这样的 php 库来确定用户是否在移动设备上，并加载一个额外的 css 文件显示<br> 然后标记。

Answer 2

简单的解决方案（可根据需要扩展）：使用媒体查询将 br 标签隐藏到一定宽度以上：

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

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

Answer 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>

Html br标签控件

Html br tag control

html

css

responsive-design