网站响应设计

Question

我正在建设我的项目。我只是注意到我犯了一个很大的错误，我在表格、边栏等中只使用像素值，这就产生了一个问题，就像其他人在电脑上有不同的分辨率一样，我的网站看上去不成形也很糟糕。

我应该使用哪些代码来应用响应性设计？

据我所知，使用宽度时，带有%的高度值是有用的。而且，我也不知道如何确切地使用%值。我还能做什么？

Answer 1

我使用"rem“单元来避免问题(包括”媒体“的最大/分钟宽度)。

假设1rem =16 in用于桌面设计，99.99%的情况下，即使在几乎未知的设备中，一切都进行得很顺利。

https://www.w3.org/TR/css-values-3/#font-relative-lengths

编辑：(导致注释)

有不同的东西。1.-使用"rem“来调整事物的大小(例如字体大小:0.875雷姆，尽管字体大小为14 or )，以使事物与像素的大小保持一致。2.-使用@media查询来改变屏幕太宽/变窄时的布局，使大小可以在rems to，所以最小宽度20 rem意味着(或多或少)20个"M”字母的宽度(不是真的，但很接近)。

假设你有一个有1480 in的24英寸屏幕，你的朋友也有1480 in，但只有6英寸。如果你的字体大小为12 px，你会看到相当不错，但你的朋友可能会发现它很小。设备/浏览器开发人员可以根据设备的物理大小(例如，24 21 )定义一个不同的rem大小，而您的0.875雷姆在他的屏幕上将是21个像素(不太小，更舒适)

改变布局，以适应一个狭窄的屏幕，也可以使用那些雷姆，所以对于相同的1480 be，他可以有一个更舒适的布局。屏幕1480/16=92,5雷姆宽，而他1480/20=74雷姆宽。

Answer 2

您可以使用百分比值，就像使用像素值一样。如果你想让你的网站的1/4成为一个侧边栏，它可以很容易：

.container { 
   width: 75% 
}
.sidebar { 
   width: 25% 
}

这将使容器占据75%的浏览器窗口。因为还剩下25%的空间，所以您可以通过使25%的宽度(可能需要将float:left添加到这两个元素)来整齐地安装它旁边的一个侧边栏。

不过，我可以想象，在移动视图中，您希望您的容器和侧边栏的宽度是100%。您可以通过使用媒体查询来做到这一点。

//medium phone size
@media screen (max-width: 425px) {
   .container {
      width: 100%
   }
   .sidebar {
      width: 100%
   }
}

Answer 3

有几种解决办法：

• 对页面使用媒体查询。
• 使用CSS网格 (和媒体查询)
• 使用Flexbox (和媒体查询)
• 使用包括网格系统在内的其他css框架