javascript - 需要使 html 页面响应

标签 javascript jquery html css responsive-design

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

<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>

最佳答案

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

示例:

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

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

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

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

关于javascript - 需要使 html 页面响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34706290/

相关文章:

javascript - 将数组传递给 app.get() 的第一个参数的替代方法是什么?

javascript - 提前执行settimeout

javascript - 添加 wrap div 后使 div 的脚本相互独立

javascript - 克隆一个 div 及其所有内容,例如按钮

javascript - 支持 iOS、Android、WP8 和下拉刷新功能的好的 iScroll 替代品是什么?

当在html表最后一行中按Enter键时,javascript插入与第一行相同的新行

javascript - 在 Javascript 中访问全局函数变量

javascript - 节点转换后拖动无法正常工作,D3

javascript - 样式密码填充输入

c++ - WinHTTP 以 unicode 请求数据?