Question

感谢您阅读，一个新手问题因为我不是很有经验。

我正在尝试为响应式网站制作桌面标题。该网站适合移动观看，但如果有人以超过最大宽度（1000像素）观看它，我想重新设计标题。

我有一个调用头文件的php文件

我还有标题html文件：

<html>
<body>


<div id="fun1">
<?php echo $fun1; ?>
</div>

<div id="fun2">
  <?php echo $fun2; ?>
  </div>

<div id="fun3">
<?php echo $fun3; ?>
</div>

</body>
</html>

当屏幕尺寸仅超过1000像素时，需要重新排序。

有没有办法通过将php和js / css或html和js / css的条件组合构建到我提到的任何一个文件中或者通过一起做其他事情来实现这一点？

感谢您的时间，感谢您给我的任何帮助。如果我问了一个糟糕的问题，我道歉。

Answer 1

在CSS中使用媒体查询，例如：

@media screen and (max-width: 300px) {
  background-color: red;
}

@media screen and (max-width: 600px) {
  background-color: blue;
}

@media screen and (max-width: 1000px) {
  background-color: yellow;
}

这些尺寸只是示例，有关详细说明我建议here

Answer 2

继Tommy的深刻回答+1后，请注意您也可以使用jQuery resize()方法。

这里有完整的解释和jsFiddle示例：

Is there a way to make a function rerun after a screensize change?

Answer 3

如果不知道所需的布局是什么，可以使用媒体查询指定何时更改布局。要更改文档的流程，您可以使用position属性手动移动div（如果容器具有固定宽度，您可以移动div，则可以使用OK解决方案s in）或float属性可以移动div s。

下面的“解决方案”显示了移动设备上堆叠的三个div。在全屏查看时，它们应与最后的第二个div并排。

/**
 * Default / mobile
 */
div {
  width:100%;
  height:5em;
}
#fun1 {
  background:red;
}
#fun2 {
  background:blue;
}
#fun3 {
  background:green;
}

/**
 * Greater than 700 pixels.
 * Place divs next to each other
 */
@media (min-width:700px) {
  div {
    float:left;
    width:32%;
    color:#fff;
    text-align:center;
  }
  div + div {
    margin-left:1%;
  }
  
  /**
   * Move #fun2 to the right
   */
  #fun2 {
    float:right;
  }
}

<html>
<body>

<div id="fun1">
  Fun 1
</div>

<div id="fun2">
  Fun 2
</div>

<div id="fun3">
  Fun 3
</div>

</body>
</html>

Answer 4

在您的CSS中使用媒体查询。你的HTML很好。

根据屏幕大小重新排序HTML或PHP

4 个答案: