如何在考虑每个用户的屏幕分辨率的情况下编写代码？ [复制]

Posted 2023-03-06

【中文标题】如何在考虑每个用户的屏幕分辨率的情况下编写代码？ [复制]

【英文标题】：How to code having in mind the screen resolution of each user? [duplicate]

【发布时间】：2021-11-11 11:51:16

【问题描述】：

我在 Figma 中进行了网页设计，将其设置为 1440px x 1024px。 （如果这有助于了解我的意思https://www.figma.com/file/IlSDcBbvr4nFp83p0jtndR/Bohhi-Portfolio?node-id=2%3A2，请点击此处的链接）

现在我想对其进行编码和样式设置，我对此感到困惑。 如何根据我的 PC 和其他所有用户的设计和屏幕分辨率来定位我的对象？

我可以让代码符合设计吗？

谢谢！

【问题讨论】：

responsive design page at MDN 可能是一个不错的起点。要点 - 使用相对单位（例如百分比和 rems）、媒体查询和其他响应式技术的组合来指导浏览器如何更改布局和视口增长/缩小。 Web 不是打印的——有无数不同的屏幕和窗口大小可以呈现您的网站。你最好的选择不是与之抗争，而是拥抱。

【参考方案1】：

尝试查看 @media query 以创建响应式布局：

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

解释编辑：

@media only screen and (max-width: 768px) 

width: 100%;

例如，您可以使用它在具有不同屏幕的设备上调整您的首选布局widths（例如：电话）。

当条件为true（例如：设备屏幕最大宽度为768px）时，将使用以下css属性（例如：width: 100%;）。通过这种方式，您可以为 PC 用户和手机用户创建不同的内容布局和属性。

【讨论】：

您好！感谢您的回答。我不明白。我无法将其编码为设计的初始大小，然后 @media 将其编码为 100% 或自动分辨率？

@bohhi 你可以使用max-width 和min-width。通过使用它，您可以查看用户查看您网站的屏幕尺寸。您可以将当前设计用于您设计的尺寸，并使用 chrome 开发工具等工具来测试其他屏幕视口/分辨率。 anexia.com/blog/en/chrome-dev-tools-explained

@bohhi 在编辑中应用了解释