按比例从psd实现页面

Question

当我得到一个psd（1750 * 2400）时，我发现图像和字体太大而不能降低分辨率。是否可以使页面适合不同的分辨率？谢谢。

Answer 1

我通常把它分成2.我的意思是网站的维度，在这种情况下，是875x1200。因此对于每个规格，如字体，块宽，图像宽度应分为2。

例如，Header字体大小为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
}