Need to make html page responsive
需要进行响应式布局。我添加了meta viewpor,但还是没有运气。或根据屏幕尺寸将其缩小以禁用水平滚动条。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <iframe height="800" frameborder="0" scrolling="no" width="466" src="EXAMPLE_WEBSITE"></iframex> </body> </html> |
您将需要通过CSS Media Queries使用断点。请通读Mozilla的文档。
示例:
1 | @media (min-width: 700px) { ... } |
这告诉浏览器在达到视口的最小宽度(即700px)时呈现页面样式。
您应该使用移动优先方法进行构建。您的第一个样式表应反映出这一点。然后,您将逐渐建立更大的显示。
请记住在响应式Web设计中使用相对单位。