Question

<style>
* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {    
  width: 50%;
  left: 50%;
  margin: 5px auto;
  word-break: break-all;
  font-family: "Times New Roman", Times, serif;
  padding: 15px;
  border-radius: 15px;
  height: 15%;   
}    
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;    
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.floated {
  float:left;
  margin-right:5px;
}      
hr {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #333; /* old IE */
  background-color: #333; /* Modern Browsers */
}     
</style>

这是列的css代码，在这些列中我显示了一些图标和文本，在我的屏幕上看起来可能很完美，但是在笔记本电脑的屏幕上看起来很破损，我该怎么做才能使它在每个屏幕上看起来都不错？我使用的是％而不是px，因此应该根据屏幕尺寸设置高度吗？

以下列的HTML代码；

<div class="row">
  <div class="column" style="background-color:#edeeef;">
<body>
<p style="float:left; margin: 0 auto; cursor:pointer; border-radius: 50%;" onclick="location='http://localhost/badges.php?wear=<?php echo $b_id; ?>'"><?php echo $userbadge; ?></p>
<p style="float:left; margin: 15px 20px; font-size:19px; cursor:pointer; color:black" align="center"><?php echo $badgedesc; ?></p><p></p>
</body>
      </div>

Answer 1

使用@media屏幕和（min-width：1000px）{}，并选择最适合您的尺寸，在此查询的括号内放置替代CSS，以设置符合声明的屏幕尺寸样式。

例如此查询中放置的任何样式仅适用于宽于1000像素的屏幕使用开发人员工具查看要调整样式的宽度。

编辑：如果有帮助，您也可以将规则更改为“最大宽度”，尝试研究css3媒体查询以充分发展自己的理解

Answer 2

您可以使用media queries

媒体查询是一种提供定制样式的流行技术工作表到不同的设备。

    // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

或者您可以使用bootstrap grid system并将预定义的类添加到元素中

Bootstrap的网格系统使用一系列容器，行和列布局和对齐内容。它使用flexbox构建，并且功能齐全响应的。

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

我该怎么做才能使我的代码在2个不同的屏幕上看起来不错

2 个答案: