将帖子缩放到屏幕尺寸[div太大，无法容纳屏幕]

Question

我正在开发一个博客网站，并且已经注意到博客文章与不同的屏幕尺寸不成比例。我主要是在台式机上开发此产品，该台式机的屏幕要比我也在其上进行测试的笔记本电脑大。我在前端使用MDL css框架。以下是该问题的一些示例：

顶部图像是显示在桌面上的网站，底部图像是显示在笔记本电脑上的网站。从图像可以看出，笔记本电脑上的博客文章很大，根本与屏幕尺寸不成比例。有没有人知道如何缩小博客文章的div，以便使其与笔记本电脑的屏幕和其他屏幕尺寸更相称？

非常感谢您

Answer 1

您需要使用媒体查询为不同大小的设备提供不同的样式。

  

媒体查询是一种流行的技术，可以向不同的设备提供定制的样式表。

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}