如何在脑海中每个用户的屏幕分辨率编码?

Question

我在Figma中进行网页设计，设置为1440pxx1024 px．(这里是链接，如果这有助于了解我的意思https://www.figma.com/file/IlSDcBbvr4nFp83p0jtndR/Bohhi-Portfolio?node-id=2%3A2)

现在我想编码和样式它，我很困惑。我如何根据我的电脑和其他用户的设计和屏幕分辨率来定位我的对象?

我能使代码符合设计吗?

谢谢!

Answer 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用户和手机用户创建不同的内容布局和属性。