Twitter Bootstrap - 如何根据@media 定义的宽度更改 css 类 [英] Twitter Bootstrap - How to change css class based on @media defined widths

问题描述

这是我在这里的第一个问题，但我想说这个网站多年来帮助了我无数次.我想我已经到了我有自己的问题要问的阶段！

This is my first question here, but I would just like to say this website has helped me on countless times over my years. I guess I've got to the stage where I have my own questions to ask!

对不起，如果问题不清楚，我会尝试详细说明:我已经为我的一些元素分配了一个过渡，这样当它们悬停在上面时它们会向上上升(即；.example:hover{margin-top: -25px} ).

Sorry if the question isn't clear, I'll try to elaborate: I have assigned a transition to some of my elements, so that when they are hovered over they rise upwards (ie; .example:hover {margin-top: -25px} ).

你可以在这个页面上看到我在哪里应用了这个.

You can see where I have applied this on this page.

将鼠标悬停在即将推出"警告框下方的元素上(即像素完美设计"、漂亮干净的代码"和超过 5 年的经验").

Hover over the elements underneath the "Coming Soon" alert box (ie; "Pixel Perfect Designs", "Beautifully Clean Code" & "Over 5 years Experience").

一切正常，但是您会注意到当浏览器窗口的大小重新调整到足够小以便元素垂直堆叠时(我相信这是 @media (max-width: 767px))，悬停效果似乎不太干净.当网站以这种方式显示时(对于移动设备)，我想完全消除这种影响.

All works fine, however you'll notice that when the browser window is re-sized small enough so the elements are stacked vertically (I believe this is @media (max-width: 767px) ), the hover effect doesn't seem quite at clean. I would like to remove the effect altogether when the website is displayed this way (for mobile devices).

那么问题是如何根据浏览器的宽度更改类的属性?我想在为移动设备显示时(即<767px)悬停时删除边距顶部，但在正常查看时将其保留在那里.

So the question is how do I change a class's properties based on the width of the browser? I would like to remove the margin-top when hovered when displayed for a mobile device (ie; < 767px) but keep it there when viewed normally.

谢谢

推荐答案

只需要添加一点小东西.

Only a small thing you have to add.

@media (max-width: 767px) {
  .shift:hover {
    margin-top: 0;
  }
}

如果在小型设备上工作，还有一件事使用过渡属性有什么好处，因为我们不希望对这个视口进行任何更改/影响.所以添加这个也是为了在移动浏览器上快速渲染.

One more thing if working on small devices what is the benefit to use transition properties because we don't want any change/effect on this viewport. So add this also for rendering fast on mobile browsers.

@media (max-width: 767px) {
  .shift {
    transition:none;
    -webkit-transition:none;
    -moz-transition:none;
  }
}

这篇关于Twitter Bootstrap - 如何根据@media 定义的宽度更改 css 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！