html - 按比例从 psd 实现页面

Question

当我得到一个 psd(1750*2400) 时，我发现图像和字体大小对于较低的分辨率来说太大了。是否可以使页面适应不同的分辨率？谢谢。

Answer 1

我通常将其分为 2。我的意思是，在这种情况下，网站的尺寸是 875x1200。因此，对于每个规范，例如字体、块宽、图像宽度，都应该分为 2。

例如，标题字体大小为 42px，那么您可以应用 21px。

Answer 2

对于图像，您可以通过指定您的偏好的宽度和高度来纯粹使用 CSS 来做到这一点。浏览器将调整图像的大小（尽管如果您没有选择正确的纵横比，图像可能看起来明显扩大或压缩）。

img {
 height: 300px; //whatever height you want
 width: 200px //whatever width you want
}

对于响应式布局，您可以使用 CSS3 媒体查询来实现不同分辨率的最佳外观。

响应式布局示例：

img {
  height: 100%;
  width:100%
}

@media screen and (max-width:64em) {
  height: 70%;
  width: 70%
}

至于字体大小，您有时可能不得不牺牲像素完美以获得最佳外观，并自行决定字体是否适合显示器。

这也可以通过使用媒体查询来控制：

@media screen and (max-width: 32em) {
  font-size: 1.5em
}