【发布时间】：2019-05-19 01:31:01
【问题描述】：
我正在尝试制作一个与 PC 浏览器和手机浏览器兼容的页面。
基本上，我想在较小的屏幕上尽可能大地调整元素的大小（理想情况下，甚至大一点），同时将所有内容限制在 PC 浏览器窗口中心的窄垂直带内。
您可以在这里看到我正在尝试的外观： http://www.hoggy.com
我试图读取浏览器的宽度以动态调整数据，但我发现我无法在所有平台上获得可靠的宽度。
所以我尝试将内容居中，并使图像和表格大小占页面大小的百分比......但在手机上它太小了（因此我希望它实际上比手机屏幕），而在 PC 上，我希望我的宽度有效地为 min(100%,500px)。
有什么办法吗？
【问题讨论】：
-
考虑使用像 bootstrap 这样的响应式框架？
-
也许查看视口单位（
vh和vw，例如100vw是整个视口宽度）。 css-tricks.com/fun-viewport-units -
你研究过 CSS 中的媒体查询吗？它们非常简单、可靠等。这就是您在不依赖某些框架的情况下实现响应式网页的方式。
-
对媒体查询和视口进行一些研究。您基本上拥有一组用于常规浏览器体验的 CSS，然后是用于不同尺寸和方向的其他 CSS。制作适合所有人的 1 比它的价值更麻烦，而且老实说不值得追求。
-
Archer：正是对媒体查询和视口的研究让我发现移动浏览器无法可靠地提供正确的分辨率信息。另外，我的布局非常简单。绝对不会比在屏幕上将列居中更麻烦。这一切都只是语法问题。
标签： javascript html css responsive-design