Html br标记控件_Html_Css_Responsive Design

Html br标记控件

html css responsive-design

Html br标记控件,html,css,responsive-design,Html,Css,Responsive Design,我有一个页面，我希望div class中的标记能在移动设备上浏览页面时起作用在pc机上浏览时不工作 <html> <header> <title>This is title</title></header> <body> Hello world <div class="this"> <br> <br> &

我有一个页面，我希望div class

中的
标记能在移动设备上浏览页面时起作用
在pc机上浏览时不工作
<html>
  <header>
    <title>This is title</title></header>
  <body>
    Hello world
    <div class="this">
      <br>
      <br>
    </div>
    <span>ok</span>
  </body>
</html>


这是标题
你好，世界




好啊
这可以通过css媒体查询实现：
.this br {
    display: none;
}
    
@media (max-width : 600px) {
    .this br {
        display: block;
    }
}

可以在这里讨论决议（600px）。如果你想确保它只影响手机，你应该使用像MobileDetect这样的php库来确定用户是否在手机上，然后加载一个显示
标签的附加css文件。
简单解决方案（根据需要扩展）：使用媒体查询将br
标记隐藏在特定宽度以上：

@媒体屏幕和（最小宽度：600px）{
.这个{
显示：无；
}
}
你好，世界




好的
您可以通过@媒体屏幕解决此问题，
以手机尺寸显示，并以较大尺寸隐藏
<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>





这是标题
。此br{显示：无；}
@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：480px）{
。此br{display:block；}
}
你好，世界


好啊
mediaquerie和高度、填充、边距有助于避免div及其br。举个例子，看看这是否可行，只需将“最大宽度”更改为“最小宽度”。否则它现在正好相反。@Andrew你是对的，我相应地修改了它…-谢谢你指出这一点！