所以我正在学习如何通过构建图片库来制作网站。
我正在使用的图像很大，所以我意识到我可以为缩略图放入调整大小的图像并决定使用500px宽度的图像
这些缩略图在手机上看起来很清晰，在平板电脑上看起来很好但在桌面上模糊不清 所以我认为移动设备和平板电脑需要500px，但台式机需要700px。
因此，这给我留下了在运行时选择两者之间的问题。
据我所知，我可以通过两种方式做到这一点。
使用javascript检查浏览器（客户端）上javascript生成html的屏幕大小（不知道如何做到这一点）。
检查用户代理是否为字符串＆＃34;移动＆＃34;并决定服务器。
或者还有其他方法吗？ 那么这两种方法中哪一种方法更好或缺点更少？
我猜想＆＃34; 2＆＃34;更好，因为它甚至在禁用javascript时也能正常工作 如果它有任何帮助，我正在使用Perl Dancer2
答案 0 :(得分：0)
我认为最好的选择是使用媒体查询，如here
所示您总是可以在html中写入两种尺寸，但是使用媒体查询只会显示一种尺寸。
其他方式是使用javascript获取窗口的高度和宽度，您将知道使用Web的客户端具有什么分辨率，因此您可以附加到图像_full或_low以区别于这种情况。
我建议您不要使用UserAgent，因为旧的PC的分辨率低于实际的移动设备，所以我认为最好使用窗口的dpi /分辨率。< / p>
您有一些媒体查询示例here
答案 1 :(得分：0)
由于您声明图像没有缩放，而是被替换，我建议您使用SRCSET，它允许您根据像素密度和宽度定义不同的图像。 SitePoint provides a good overview
以下是他们文章的样本：
<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />