响应式网站设计

Question

我正在构建我的项目。我只是注意到我在表格，侧边栏等中使用像素值时犯了一个大错误。所以它会产生一个问题，就像其他人在计算机中有不同的分辨率一样，我的网站看起来没形状和坏。

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

据我所知使用宽度，高度值与％是有用的。另外，我不知道如何使用％值。还有什么我应该做的？

Answer 1

我使用“rem”单位来避免问题（包括“媒体”最大/最小宽度）。

对于您的桌面设计，请考虑1rem = 16px，即使在几乎未知的设备中，一切进展也是99.99％。

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

编辑:(引起评论）

有不同的东西。 1.-使用“rem”来调整大小（比如font-size：0.875rem，尽管字体大小：14px），以保持与像素大小相匹配的比例，2 .-使用@media查询来更改布局当屏幕宽/窄时，可以在rems中完成尺寸调整，因此min-width 20rem意味着（或多或少）20“M”字母的宽度（不是真的，但是接近）。

假设你有一个24英寸屏幕，1480px，你的朋友也有1480px，但只有6英寸。如果你使字体大小为12像素，你会看到相当不错，但可能你的朋友会发现它很小。设备/浏览器开发人员可以根据设备的物理尺寸（例如24px）定义不同的rem大小，而你的0.875 rem将在他的屏幕上显示21像素（不是那么小，看起来更舒服）

适应窄屏幕的布局变化也可以使用这些rems来完成，因此对于相同的1480px，他可以拥有更舒适的布局。你有一个屏幕1480/16 = 92,5 rems宽度，但他有1480/20 = 74 rems宽度。

Answer 2

您可以像使用像素值一样使用百分比值。如果您希望将您网站的1/4作为侧边栏，则可以像以下一样简单：

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

这将使容器占据浏览器窗口的75％。由于剩余25％的空间，您可以通过使其宽度为25％来整齐地放置旁边的侧边栏（您可能需要将float:left添加到两个元素）。

但是，我可以想象在移动视图中，您希望容器和侧边栏的宽度为100％。你可以使用media queries来做到这一点：

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

Answer 3

有几种解决方案：

• 对您的网页使用媒体查询。
• 使用CSS grid（和媒体查询）
• 使用Flexbox（和媒体查询）
• 使用包括网格系统在内的其他css框架

Answer 4

你可以从Bootstrap开始。这不仅会使您的网站响应，而且还有许多HTML元素的预定义设计，如按钮，字体，表格等。您只需要使用这些类。

如果您不熟悉Bootstrap，那么@Damian Makkink和@Marc_DNL已经发布了。

IMO是一个自建的CSS，用于响应式网站和设计更好。最初，在我的爱好项目中，我开始使用Bootstrap，但我完全已经完成了这个步骤。