需要使html页面响应

【问题标题】：Need to make html page responsive需要使html页面响应
【发布时间】：2018-11-20 18:36:48
【问题描述】：

需要做出响应式布局。我添加了元视口，但仍然没有运气。或者根据屏幕尺寸缩小以禁用水平滚动条。

<html>
<head>

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

</head>
<body>

<div class='myIframe'>
<iframe height="800" frameborder="0" scrolling="no" width="466" src="EXAMPLE_WEBSITE"></iframe>

</div>

</body>
</html>

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

您需要通过 CSS 媒体查询来利用断点。请通读Mozilla的documentation.

例子：

@media (min-width: 700px) { ... }

这告诉浏览器在满足视口的最小宽度（即 700 像素）时呈现页面的样式。

您应该使用移动优先的方法进行构建。您的第一个样式表应该反映这一点。然后，您将逐渐建立更大的显示器。

记得在响应式网页设计中使用相对单位。

【讨论】：

我可以在使用 iframe 时实现媒体查询吗？
@FarhadMammadli 参考这个答案stackoverflow.com/questions/27227214/…
谢谢，现在我需要根据屏幕尺寸调整或缩小此网页