我正在更新ID为if7ou的文本元素。 问题是,如果用户首先在移动视图上更新样式,然后在选项卡视图上更新,然后在媒体查询上对选项卡视图不起作用。 如果我们先更新桌面的样式,然后再更新选项卡,然后再移动的样式,那么一切都很好,但是如果我们先反转移动视图的位置,然后再更新选项卡视图的第二次,然后是桌面视图的第三次,则CSS /媒体查询将不适用于选项卡和桌面视图。 因此,我希望我们可以按任意顺序添加css的任何选项,首先是480,第二次是992,反之亦然。css应该基于设备大小而不是基于它们出现的顺序来应用。

@media (max-width: 480px) {
    #if70u {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #if70u {
        font-size: 40px;
    }
}

我认为这是由于480应该下跌,而992应该在上方。 任何帮助,将不胜感激,谢谢!

#1楼 票数:1

我建议使用最小宽度而不是最大宽度。 这将确保不会加载992px样式或将其显示在您的移动视图中。 它还将更好地满足“移动优先”的要求,因为您只为移动设备加载了移动样式,然后仅在视口增长到平板计算机时才添加平板计算机样式,依此类推。 这也将解决您的问题。

#if70u {
    font-size: 20px;
}

@media (min-width: 481px) {
    #if70u {
        font-size: 40px;
    }
}

通常,我很少使用max-width,并且经常在需要时使用它,这是因为我创建了某种糟糕的代码,后来在瀑布上产生了后果。

#2楼 票数:0

在这种情况下,您应该使用移动优先技术,主类上的声明适用于移动,然后将媒体查询增加到更大的设备,看看:

#if70u{
  font-size: 14px; //Its apply for mobile
}

@media screen and (min-width: 768px){
  #if70u{
    font-size: 16px; //Its apply for tablets
  }
}


@media screen and (min-width: 992px){
  #if70u{
    font-size: 18px; //Its apply for small desktop screens
  }
}


@media screen and (min-width: 1200px){
  #if70u{
    font-size: 20px; //Its apply for large desktop screens
  }
}

#3楼 票数:0

除了@S。 邓恩回答。

如果要将样式设置为特定的最小和最大宽度,可以使用以下方法:

@media only screen and (max-width: XXXpx) and (min-width: XXXpx)

因此,在您的情况下,它将是:

#if70u {
    font-size: 20px;
}

@media only screen and (max-width: 992px) and (min-width: 481px) {
    #if70u {
        font-size: 40px;
    }
}

  ask by Prince translate from so

未解决问题?本站智能推荐:

4回复

CSS媒体查询顺序

我对CSS媒体查询有疑问。 我的问题是,我对CSS媒体查询的顺序是否会有所不同。 例如: 假设我要通过几个媒体查询来定位台式机,笔记本电脑和移动设备。 这会改变设计在多个设备上的显示方式吗? 链接的顺序是否重要?
1回复

CSS媒体查询的问题

我正在尝试刹车的正确点,以便可以向我的应用程序添加媒体查询。 我找到了一个很棒的网站http://sensitivepx.com/来测试我的应用程序。 我运行了我的应用程序,发现它显示我的应用程序在1257宽度和1576宽度之间制动,然后,我的应用程序将再次正常。 因此,我编辑查询以解决
2回复

@import媒体查询CSS问题

我正在准备我的第一个自适应Web布局。 我准备了两个CSS,一个用于普通模式,另一个用于移动模式。 桌面模式(CSS) #face{background-image: url(../images/Face.png); background-repeat: no-repeat;height
4回复

有关CSS媒体查询的问题

我对CSS媒体查询有疑问。 我正在使用desktop.css和ipad.css实现HTML页面,并希望将它们放在2个单独的文件中。在desktop.css中,我使用@import url(“ ipad.css”); 并添加@media不仅屏幕和具有实际桌面样式的(device-width:
1回复

CSS媒体查询解决问题

我想知道如果屏幕分辨率低于1024x768,如何使用CSS Media Queries来检测屏幕分辨率并进行不同的页面加载? 我还需要知道是否可以在master.css脚本中放置此查询? 还是需要将其放置在哪里? 站点地图(不包括Java) Index.html (主页) A
4回复

CSS媒体查询出了什么问题?

我正在研究一些基本的媒体查询。 我不确定是什么问题,但是无论我做什么,该图像都不会显示在div(id =“ image”)中。 我目前仅在Chrome和其他桌面浏览器上对此进行测试。 预先感谢您的反馈! 我有以下CSS的div: HTML: CSS:
1回复

JavaScript媒体查询和CSS动画问题

我在我正在工作的网站上遇到了一个小问题,但真是伤脑筋。 我同时使用CSS动画和JavaScript媒体查询。 断点为768像素,并触发一个事件,其中第二个div附加到第一个div。 每个div都包含一个动画元素。 问题在于,函数触发时,附加元素的动画会重新启动(而另一个元素的动画保持稳定
3回复

CSS媒体查询屏幕方向问题

我正在使用此媒体查询的目标视口最大宽度为800px设备的最小宽度为400px 我需要为此改变横向的颜色 它在设备中工作正常,但背景红色适用于PC浏览器,也如何仅将背景红色应用于设备横向? 谢谢。