如何在 CSS 中创建以特定宽度工作的函数 [关闭]
Posted
技术标签:
【中文标题】如何在 CSS 中创建以特定宽度工作的函数 [关闭]【英文标题】：how to create a function that work in specific width in CSS [closed] 【发布时间】：2021-11-14 15:28:18 【问题描述】：是否可以在 javascript 或 jquery 中创建一个在 CSS 中以特定宽度工作的函数 就像我想创建一个警报（“hello world”）按钮，但这只会在其他媒体查询中的移动屏幕上起作用，不会做任何事情
【问题讨论】：
我不明白这与 CSS 有什么关系，或者设备是否是移动设备。您是否只想让按钮在所有视口宽度上可见，但仅在视口宽度小于某个大小时才执行某些操作？ developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 我相信这是 Javascript - Run my script only if landscape is detected 的副本。值得一提的是，虽然我的回答没有获得最多的选票，但它确实得到了用户的选择，而且，就像@zero298 的建议一样，我建议利用matchMedia——如果你想基于媒体查询触发 JS在我看来，这是您可以采用的最原生的方法。祝你好运，编码愉快！
【参考方案1】：
我觉得不可能，可以用下面的代码来获取宽度：
// Size of browser viewport.
$(window).width();
// Size of html document (same as pageHeight/pageWidth in screenshot).
$(document).width();
所以如果你想在手机上申请，你可以添加一个条件
if ($(window).width() <= 425)
// Do something
alert("hello world")
【讨论】：
【参考方案2】：if ($(window).width() < 768)
// do something
如果使用 jquery
【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。【参考方案3】：<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function()
if ($(window).width() <= 575)
alert("hello world")
);
</script>
</head>
<body>
</body>
</html>【讨论】：
以上是关于如何在 CSS 中创建以特定宽度工作的函数 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
在 Java DOM 中创建以命名空间为前缀的 XML 节点