试着看看这是否有回应

Question

查看下面的基本CSS，确认这是否会提供响应式页面。如果没有，那么需要做出哪些改变以使其具有响应性？

  <style>
.article {
  float: left;
  margin: 5px;
  padding: 5px;
  width: 300px;
  height: 300px;
  border: 1px solid black;
} 
</style>

Answer 1

大量进入＆＃34;使网站响应＆＃34;。仅仅一套简单的指令就不会这样做。但是如果你的问题意味着 - ＆＃34;如何让这个特定的部分响应？＆＃34;那么你可能想从这开始：

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

同样，仅此一点就不会这样做。这些是进入RWD的一些（但不是全部）

• @media

  

viewport元素为浏览器提供有关如何控制页面尺寸和缩放的说明。 width = device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

• 熟悉UITableView次查询 - 阅读PostgreSQL's array operators and functions
• RWD框架 - 采用响应式框架为您节省一些步法。我推荐Bootstrap。找到它here

Answer 2

响应式CSS可以表征为使用基于屏幕大小百分比的测量值或结合使用媒体查询。

非固定单位测量

.article {
  float: left;
  margin: 5%;
  padding: 5%;
  width: 50%;
  height: 300vh;
  font-size: 1.2em;
  border: 1px solid black;
} 

样式表中的媒体查询

@media (max-width: 600px) {
  .article {
    width: 100%;
  }
}