Tag: media queries

使用Css MediaQueries覆盖JQuery css值: 我正在使用css媒体查询构建一种响应式Web响应。我刚开始用jQuery包含一些动画并遇到了以下问题：使用jQuery动画元素时，每个元素都会在其style=”…”属性中接收动画值。这意味着它们的原始值（可能已存储在类中）将被忽略。我有一个媒体查询，目标是print并重置动画值，以便在纸上提供更好的视觉体验。问题是，媒体查询中的更改不会影响元素，因为它们现在具有自己的样式属性，该属性比类设置更强。 @media print{ .PaddOnScroll{ padding-left: 1.6em; opacity: 1; } } … 您是否知道我如何强制应用媒体查询？

如何创建适合移动设备的响应菜单？: 我是HTML，CSS的新手，我正在尝试制作简单的响应式菜单。resize后，浏览器菜单图标将显示，然后点击打开菜单。请检查下面的代码。你能帮帮我吗？注意：我不想使用bootstrap。 body{ margin: 0; padding: 0; height: 100%; } #menu-bar { font-size: 20px; text-align: right; cursor: pointer; display: none; } .menu-logo { float: left; } nav{ width: 100%;text-align: center; } nav ul { background-color: #A4D54C; float: right; font-size: 20px; line-height: 50px; } nav li{ display: inline; list-style-type: none; } nav a{ text-decoration: none; padding: […]

jQuery可以修改特定媒体类型的CSS吗？: 是否有可能jQuery修改特定媒体类型的CSS（例如打印）？我的具体问题是我在元素上使用动画并且它覆盖了打印样式表，这会破坏我的打印布局。虽然我的问题与提出的一般问题略有不同，但我认为答案可以帮助我解决我的问题。任何可能的解决方法也会有所帮助。非常感谢。

jQuery更改媒体查询宽度值: 在页面运行时，是否可以使用jQuery或其他任何内容来更改@media query css宽度值？所以，例如，如果在style.css我有 @media screen and (min-width: 400px) { /*whatever*/ } 加载网站后将其更改为500px

CSS媒体查询作为浏览器resize？: 我认为CSS媒体查询不起作用，因为用户调整浏览器的大小？用户必须刷新页面才能使媒体查询生效？如何使用JS更新媒体查询？目前我在resize时使用JS检测窗口大小添加addClass()

resize浏览器时，Modernizr Media查询不起作用: 我在JavaScript中使用Modernizr媒体查询来更改元素边距并添加“小”类。当我调整浏览器大小时，我的Modernizr媒体查询不起作用，但是当我刷新页面然后它工作。我知道我可以使用jQuery $( window ).resize()函数解决这个问题，但我想用媒体查询来解决它。任何人都能告诉我如何解决这个问题吗？ Foundation 5 $(document).ready(function() { if (Modernizr.mq(‘(max-width: 767px)’)) { $(“#secondary”).addClass(“small”); $(“#secondary”).css(“margin”, ” 25px”); } }); #primary { width: 300px; height: 200px; background-color: black; } #secondary { margin: 0 auto; width: 250px; height: 150px; background-color: white; position: absolute; }

基于设备显示不同的元标记: 今天遇到各种元标记问题…… 我希望这个元标记显示在（最大宽度：1024px）和（最小宽度：768px）的设备上… 这个元标记为（最小宽度：320像素）和（最大宽度：568像素）…… 什么是显示适当元标记的最佳解决方案？我可以在元标记上使用”media=”only screen and (device-width: 768px)”吗？

Twitter Bootstrap – 如何检测媒体查询何时开始: 当bootstrap-responsive.css媒体查询付诸实施时，这是最快速，最简单的方法吗？ go in action =当您将窗口调整为移动宽度并将网站更改为响应式移动时希望问题很清楚

我需要一种简单的方法来使用jquery检测CSS3媒体查询支持: 我需要一种快速而肮脏的方法来使用jquery检测媒体查询支持。我定义了一个函数如下： function mediaQueriesEnabled () { var v = parseFloat($.browser.version); if ($.browser.msie) { if (v < 9) return (false); } return (true); } 有人可以帮我解决这个问题吗？看这个页面： http://caniuse.com/css-mediaqueries 我意识到这里有一些复杂性。例如，当我测试我的safari版本时，我得到“534.57.2”。我现在想避免安装modernizr，主要是因为我处于紧张状态，我需要在短期内处理大多数情况。任何帮助表示赞赏！

使用javascript或jQuery生成CSS媒体查询: 是否可以使用Javascript或jQuery动态创建完整的媒体查询规则？我使用了大量的媒体查询来使用内联CSS，导入和链接文件来定位通用视口和特定设备/屏幕： @media screen and (min-width:400px) { … } @import url(foo.css) (min-width:400px); 我可以使用jQuery添加/删除类： $(“foobar”).click(function(){ $(“h1,h2,h3”).addClass(“blue”); $(“div”).addClass(“important”); $(‘#snafu’).removeClass(‘highlight’); }); 我还看一下document.stylesheets和看似古老且特定于浏览器的内容： document.styleSheets[0].insertRule(“p{font-size: 20px;}”, 0) 但我找不到任何以编程方式生成的引用： @media screen and (min-width:400px) 直接或以任何forms从javascript。