从psd按比例实现页面

Question

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

Answer 1

我通常把它分成两部分。我的意思是网站的维度在这种情况下是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 
}