程序员经验分享-hwhale

如何使用javascript根据用户需求触发媒体查询

2024-04-14

我有一个响应式网页，针对不同的屏幕尺寸具有不同的设计，我正在使用 @mediaquery 来更改我的设计。我想让用户能够更改更小或更大屏幕尺寸的设计，即使屏幕尺寸没有改变。

是否可以在不改变屏幕尺寸的情况下用js触发@mediaquery？


看一下查询.js http://wicky.nillia.ms/enquire.js/，一个轻量级的纯 JavaScript 库，用于响应 CSS 媒体查询。

有了它，您可以添加一个class to body基于屏幕的宽度。然后，如果您根据主体是否具有某个类来组织 CSS。您可以使用 JS 根据用户的选择动态地将这些类添加到主体中。

你可以使用另一个 JS 库做同样的事情：媒体课 https://github.com/jonathantneal/MediaClass，下面这行JS：

MediaClass("small-screen", "body(this-max-width: 480px)");

添加类small-screen到 body 标签，如果body的宽度低于480px。现在，您可以向网站添加一些按钮，这些按钮会更改主体的宽度，并且如果您以这种方式设置 CSS 类，则页面的布局将会更改，而不是“仅”基于屏幕尺寸。因此，对于这两种方法，您都必须稍微重构一下 CSS。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

responsivedesign

mediaqueries

如何使用javascript根据用户需求触发媒体查询 的相关文章

  • 如何修复“没有这样的文件或目录，lstat 'scss/'”？

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权

  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

  • 禁用 Bootstrap 中的选项卡

    我正在尝试禁用引导程序中的选项卡 我一直在研究 但尚未找到解决方案 我已经尝试过这个 可以禁用 Bootstrap 中的选项卡吗 https stackoverflow com questions 9237314 can you disab

  • 如何使用正则表达式匹配模式的最后一次出现

    我有一个像这样的字符串 token1 token2 我要匹配 token2 使用正则表达式 它应该匹配的其他可能的情况是 token1 应该匹配 最后一个 token1 应该匹配 最后一个 token1 token2应该匹配 token2

  • React Router v4 与 的优点

    除了能够在 NavLink 上设置 activeClassName 和 activeStyle 之外 还有什么理由使用NavLink over Link在您的网站上不需要活动状态 类的非导航元素 即不是页眉或页脚中的主导航 上创建指向其他路

  • 理解 z-index：该元素如何出现在其父级同级元素的前面？

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d

  • 如何使用 ES5 扩展 ES6 类？ [复制]

    这个问题在这里已经有答案了 这样做的原因很复杂 但归根结底是因为 Flow 不理解 mixin 或任何其他修改 ES6 类原型的方法 所以我又回到了 ES5 但我不知道如何在不使用 ES6 的情况下调用 ES6 类的构造函数new clas

  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl

  • 在 Three.js 中绕点旋转对象的正确方法是什么？

    关于 Three js 的大多数教程 问题都建议使用 Three js 绕点旋转对象的方法是在要旋转的位置创建父对象 附加对象 然后移动子对象 然后 当父级旋转时 子级围绕该点旋转 例如 Make a pivot var pivot new

  • jQuery mobile 中的文本区域高度和宽度？

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML

  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo

  • 如何删除除任何特定 id 之外的元素

    假设有一个父 id 其中包含许多元素 我想删除除一个元素之外的所有元素 ex parent id children not id n remove

  • Jquery 悬停卡

    我在用着http designwithpc com Plugins Hovercard http designwithpc com Plugins Hovercard 但我不知道如何在悬停卡上声明 var 每个工作描述都有自己的 ID 当悬

  • JavaScript 添加布尔值

    console log true true 2 console log typeof true true number console log isNaN true true false 为什么两个布尔类型相加会产生一个数字 我有点理解 如

  • 浏览器视口大小（以设备像素为单位）

    Goal 我希望 Flash 能够获得有关浏览器视口宽度和高度 以设备像素为单位 的准确信息初始化 调整大小或浏览器缩放事件时 规格 我需要将 flash 嵌入到在 chrome safari firefox 等中运行的 html 页面中

  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法

  • 从函数返回函数的目的是什么？

    阅读一些遗留代码 发现 A prototype setSize function var v1 new Vector2 return function size var halfSize v1 copy size multiplyScala

  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele

  • 为什么 window 与 Internet Explorer 中的 window.self 不同？

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se

随机推荐

  • 实体“HTML.Version”的声明必须以“>”结尾

    我是 XML 解析和 DTD 的新手 我试图创建一个简单的 SpringBean 程序并使用 Spring xml 实例化一个类 Triangle java 我的 DrawingApp java 如下所示 import org spring

  • .NET 中的防篡改配置文件？

    我们提供带有关联配置文件的 NET 应用程序 我们的顾问在安装过程中创建配置文件 我们希望让客户端很难篡改配置文件 我们有哪些途径 目前 我正在考虑使用我们的私钥对配置文件进行签名 并在应用程序启动时根据公钥对其进行验证 然后我将公钥隐藏在

  • 让 HTML5 视频适合父元素大小

    我在 中有一个 元素 当页面上的其他元素动态调整 添加 删除时 该元素会自动调整大小 我希望视频元素也能自动调整大小 以便它始终包含在其背景 div 中 如果我将视频元素的 CSS 高度和宽度设置为 100 这种方法就有效 因此它的大小始终

  • 具有动态排序依据的 LINQ 查询

    我有一个查询 我需要基于查询字符串参数进行排序 例如 如果排序参数是价格 则查询需要随价格更改 如果其评级则更改查询以按评级排序 我知道 PredicateBuilder 可以执行 And 和 OR 操作 但是如何进行动态 ordeby l

  • 创建新对话框时出现 NullPointerException

    我有一个 DialogFragment 它创建一个列表视图对话框 并在列表项上单击 我想显示一个警报对话框 但是当我创建该对话框时 它给了我一个NullPointerException出现我以前从未见过的错误 08 05 11 40 42

  • F# 的 timeit 函数

    我想写一些类似的东西 let timeit x a gt b let start System DateTime Now x let duration System DateTime Now start printfn time usage

  • Dtrace 中的局部变量

    如何使用 dtrace 访问函数的本地变量 例如 在下面的代码片段中 我想使用 dtrace 了解变量 x 的值 void foo int a int x some fun a 对于内核代码来说 跟踪局部变量是不可能的 因为没有检测任意内核

  • Android实现ScrollView setOnScrollChangeListener

    在我的显示和隐藏一些小部件的应用程序中 我在该网站上找到了以下代码 但我无法在我的片段上实现它 例如 public abstract class HidingScrollListener extends RecyclerView OnScr

  • 如何从命令行设置MySQL会话wait_timeout？

    正如您从下面的输出中看到的 我正在使用 MySQL shell 来更改会话的wait timeout可变为 30 秒 有用 但是 是否可以从命令行设置此变量 mysql u root h 127 0 0 1 p Enter password

  • .Net TimeZoneInfo ID - 是否特定于 Windows 语言？

    我正在使用 net TimeZoneInfo FindSystemTimeZoneById 方法 据我所知该方法查询注册表 存储在注册表 HKEY LOCAL MACHINE Software Microsoft Windows NT Cu

  • Python 调试器的列表理解范围错误

    在调试我的代码时 我想使用列表理解 但是 当我在函数内部时 我似乎无法从调试器评估列表理解 我正在使用Python 3 4 脚本内容 cat test py usr bin python def foo x 1 2 3 3 4 print

  • 模拟 ZPL 打印机

    为了在我的 Mac 上模拟 ZPL 打印机 我在互联网上搜索了几天 最后 我在这里发布了一个解决方案 以便其他用户可以发现它有帮助 我想在这里发布我的解决方案模拟 Zebra 打印机 https stackoverflow com ques

  • 根据 JQGRID 中的条件编辑行

    在 JQGRID 中使用表单编辑 我用不同的颜色显示行 红色 无法编辑行 黑色 可以编辑行 1 Option 当用户单击编辑按钮并且所选行为红色时 应显示消息记录 无法编辑 2 选项 如果用户选择了黑色标记的可编辑行 用户可以编辑该行 但是

  • 当我在程序启动后复制 DLL 时，在运行时加载程序集失败

    在运行时我加载一个程序集 Assembly assembly Assembly LoadFrom c MyFolder MyAssembly dll 如果程序集位于该文件夹中 则此方法有效 如果程序集不在文件夹中 我会得到一个异常 当然告诉

  • 在 Java 中如何检查字节数组是否包含 Unicode 字符串？

    给定一个 UTF 8 编码字符串或任意二进制数据的字节数组 可以使用哪些方法in Java来确定它是哪一个 该数组可以由类似于以下的代码生成 byte utf8 Hello World getBytes UTF 8 或者 它可能是由类似于以

  • Ansible：全局模板文件夹？

    谷歌搜索找不到任何东西 有group vars 全部 对于变量 有类似的模板吗 我想在多个角色中使用一些模板 您可以将全局模板放入templatesAnsible 布局顶层目录 与group vars 顺便说一句 全局文件也是如此 file

  • 数组指针的常量正确性？

    有人争论说 在现代 C 语言中 我们应该始终通过数组指针将数组传递给函数 因为数组指针具有强类型 例子 void func size t n int arr n int array 3 func 3 array 这听起来可能是防止各种类型相

  • dask 可以用于在核心之外进行分组和重新编码吗？

    我有 8GB csv 文件和 8GB RAM 每个文件每行有两个字符串 格式如下 a c c a f g a c c a b f c a 对于较小的文件 我删除重复项 计算前两列中每行的副本数 然后将字符串重新编码为整数如下 https s

  • 使用 VBA 选择“查找”的第二个结果

    我正在努力做到这一点 以便我可以找到 lights 的第二个结果 以防该术语出现各种情况 下面的代码查找所考虑范围内的第一个匹配项 Dim ws As Worksheet Dim rng1 As Range Dim y As Range C

  • 如何使用javascript根据用户需求触发媒体查询

    我有一个响应式网页 针对不同的屏幕尺寸具有不同的设计 我正在使用 mediaquery 来更改我的设计 我想让用户能够更改更小或更大屏幕尺寸的设计 即使屏幕尺寸没有改变 是否可以在不改变屏幕尺寸的情况下用js触发 mediaquery 看一

热门标签