gpt4 book ai didi

css - 在小屏幕上显示小尺寸 Logo ,在大屏幕上显示大尺寸 Logo - 正确方法

转载 作者:行者123 更新时间:2023-11-28 10:50:07 27 4
gpt4 key购买 nike

我知道之前已经回答过类似的问题。但我无法弄清楚哪种方法是最好的。我发现有两种方法:

  1. 使用img 标签获取两张图片,一张是小尺寸的,一张是大尺寸的。在大屏幕上隐藏小尺寸 Logo ,在小尺寸屏幕上则相反。

  2. 使用 css 背景并在媒体查询中为不同的分辨率提供不同的 Logo url。

但这是实现此目标的更标准方法。在 SEO 方面,我认为使用 img 标签至少在显示您网站的 Logo 方面更好。但就性能而言,您总是需要下载一张额外的图像,从而导致多一个请求。

除了这两种方式,还有没有其他方式可能是我遗漏的呢?

最佳答案

使用媒体查询

响应式设计始终意味着使用 @media 查询通过 CSS 有选择地定位设备屏幕尺寸和方向。您可以通过媒体查询获得流畅的体验。 Firefox、Safari(包括 Mobile)、Chrome 和 Opera 都支持它。 Internet Explorer 9 将支持它,但 8 及以下版本不支持。对于那些不支持使用 javascript 技术的浏览器,如 this .

更新:

如果您关心服务器端组件,请使用 adaptive images .否则,如果你关心双重请求,那么source shuffling适合你。

引用:推荐阅读this .

关于css - 在小屏幕上显示小尺寸 Logo ,在大屏幕上显示大尺寸 Logo - 正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22828753/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com