css - 基于基本宽度的 CSS 缩放

Question

我知道有几种方法可以扩展我的网站。但我什至找不到基于基本宽度缩放页面的智能方法。比如说，我已经针对特定宽度优化了我的移动网站，并且针对页面的所有其他宽度进行了缩放。我可以将我的基本宽度设置为 640 像素 - 如果访问者视口为 640 像素，则元素不会缩放。如果访问者视口为 1000ox，则元素应按 1.5625 倍（1000px/640px）缩放。什么是实现这一目标的聪明方法。是的，我可以运行 JS 来获取视口并计算宽度，但我更喜欢 CSS 解决方案——比如在类中设置参数和乘以宽度。谢谢并恭祝安康 ：）

Answer 1

这是您应该考虑在 css 中使用的内容的小清单。

媒体查询：这些可以帮助您将固定宽度调整为用户所需的任何大小。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

使用百分比：通过使用百分比而不是固定宽度，应用它的对象会根据用户的屏幕进行调整。

https://www.w3schools.com/cssref/pr_dim_width.asp

使用 min-width & max-width：这允许您设置最小或最大宽度，它可以帮助您更轻松地将网站调整为使用的屏幕尺寸。

https://www.w3schools.com/cssref/pr_dim_min-width.asp https://www.w3schools.com/cssref/pr_dim_max-width.asp

我希望这对你有所帮助:)

这是一个很好的游戏：https ://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=50%25