【问题标题】:Can I link an external javascript within my CSS stylesheet?我可以在我的 CSS 样式表中链接外部 javascript 吗?
【发布时间】:2016-10-24 21:38:49
【问题描述】:

我正在尝试设置一些东西,我的背景会根据用户的浏览器宽度进行缩放,但我被绑定到外部样式表中某个元素下的背景设置。我可以改变背景,我可以修改它的属性,但是我不能用html背景替换它。

我一直在为此研究解决方案,但其中大多数似乎都不起作用。我什至尝试链接(在 html 中)一个外部 JS,它检测屏幕分辨率并相应地选择一个 bg 文件,这正是我需要的,只有浏览器根本没有检测到它,无论我将脚本嵌套在 html 中还是只是链接它。所以我正在寻找一种方法将它链接到 CSS 中的 bg 设置下。根据我的阅读,这是“可能但有风险”,没有关于如何完成的真正说明。

尽管有风险,我还是愿意尝试,但我也愿意接受其他建议。我所需要的只是能够为小型手机和其他所有东西设置两个不同的图像文件(相同的图像,只是缩放不同)。我已经看过 srcset 了,但这需要嵌入到 html 中,所以它不适合我,虽然我很兴奋。我不介意自己实际编辑图像。

【问题讨论】:

  • 我怕标题,所以不敢看细节,我认为答案是否定的。
  • 如果您尝试根据屏幕尺寸替换 background-image,我认为您正在寻找的是 media queries
  • 欢迎来到 StackOverflow。请添加您尝试过的代码。
  • 我尝试了媒体查询,正如答案中所建议的那样,但我似乎无法在不破坏整个背景部分的情况下将格式带入查询中。查询之外的格式将被忽略。 screenshot

标签: javascript html css background browser-width


【解决方案1】:

我不确定你在 css 的 bg 设置中链接 javascript 是什么意思。

但是您应该能够使用 CSS 中的媒体查询设置不同的背景。看看https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】:

  • 这正是我想要的,谢谢。但是它似乎不允许格式化。查询外部的格式被忽略,并且在查询中添加它会破坏整个事情,使浏览器在加载时跳过整个部分。 screenshot
  • 当您说格式化时,您是在谈论格式化您的 css 吗?应该支持。看看这个 codepen,如果这就是你想要做的事情,请告诉我:codepen.io/simiacode/pen/rLWZzz 随意编辑和玩弄它。
  • 这很奇怪。使用您的代码,它可以正常工作,可能是因为它没有太多参数。使用我的,当您低于 500 时,直到您看到所有格式都丢失(在文本和徽标上,它们使用自己的 div 类格式化)之前,没有任何问题是明显的。图像也开始平铺,而不是采用“封面”尺寸。实际上,它们似乎在分辨率变得足够低以破坏格式之前开始平铺;我想这取决于图像的宽度。
【解决方案2】:

听起来好像您正在寻找媒体查询。您可以根据媒体功能设置特定的 CSS。

有关媒体查询的描述和示例,请参阅 W3Schools

【讨论】:

  • 这正是我想要的,谢谢。但是它似乎不允许格式化。查询外部的格式被忽略,并且在查询中添加它会破坏整个事情,使浏览器在加载时跳过整个部分。 screenshot
猜你喜欢
  • 2022-01-01
  • 2011-07-19
  • 2014-06-06
  • 1970-01-01
  • 2015-11-03
  • 2011-01-08
  • 2023-04-11
  • 2019-07-18
  • 2011-03-23
相关资源
最近更新 更多