在css中使用@media时骑行风格的样式

因此，我有一个noob问题，一个令我恼火的问题。所以，我有以下类型样式表：在css中使用@media时骑行风格的样式

#content .post-content .row .col-md-6 .box-top { 
    background: #714f46; 
    padding: 10px; 
    color: #fff; 
    text-align: center; 
    font-family: "custom-script"; 
    position: relative; 
    height: 52px; 
    font-size: 34px; 
    padding-top: 12px; 
} 

@media (min-width: 960px) { 

} 

@media (min-width: 768px) { 
} 

@media (min-width: 640px) { 
    #content .post-content .row .col-md-6 .box-top { 
    width: 453px; 
    } 
} 

@media (min-width: 480px) { 
    #content .post-content .row .col-md-6 .box-top { 
    width: 353px; 
    } 
}

现在的问题是，任何超过641px将使用640px规则。即使屏幕是1920x1200。我认为它是因为我没有为原始元素定义宽度？如果多数民众赞成的情况下，我一巴掌宽的453px原始的元素上：

#content .post-content .row .col-md-6 .box-top { 
    ... 
    width: 453px; 
}

但问题是，它几乎像@media规则具有优先级，因为在crhome检查时，宽度为1366px，它仍然使用规则的640px而不是我刚刚定义的宽度。现在我想到的是，而不是：(min-width: xyzpx)我会使用max-width，但这似乎采取了客户需要的平滑缩小效果的方式，他们不希望它在介质大小之间跳动。

我的元素是否应该有max-width的453px来覆盖@media规则？

#content .post-content .row .col-md-6 .box-top { 
    ... 
    max-width: 453px; /** or a min-width: 453px **/ 
}

基本上我的问题是：

为什么我的@media规则重写页面上的任何其他规则。在这种情况下，为什么它使用640规则中的宽度应用于上述任何元素，而元素的原始定义没有指定宽度？

而且

为什么当我为元素指定的那个原始定义的宽度，即@media规则，这在为640px覆盖定义了一个新的宽度它，尤其是当窗口宽度是说1366px ？

来源

2014-12-11 SeekingTruth

从我了解你的问题是，你要应用非移动的方法首先，并通过使用你必须使用在max-width代替min-width

这样的：

/*========== Non-Mobile First Method ==========*/ 

    @media only screen and (max-width : 960px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 768px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 480px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (max-width : 320px) { 
     /*your CSS Rules*/ 
    }

，或者如果你想使用移动第一种方法那么你应该使用min-width但这种方式：

/*========== Mobile First Method ==========*/ 

    @media only screen and (min-width : 320px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 480px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 768px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (min-width : 960px) { 
     /*your CSS Rules*/ 
    }

下面是从我的理解这一个片段是你在找什么：

#content .post-content .row .col-md-6 .box-top { 
 
    background: #714f46; 
 
    padding: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: "custom-script,arial"; 
 
    position: relative; 
 
    height: 52px; 
 
    font-size: 34px; 
 
    padding-top: 12px; 
 
} 
 
/*========== Non-Mobile First Method ==========*/ 
 

 
@media only screen and (max-width: 960px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 640px) { 
 
    #content .post-content .row .col-md-6 .box-top { 
 
    width: 453px; 
 
    } 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 320px) { 
 
    /*your CSS Rules*/ 
 
}

<div id="content"> 
 
    <div class="post-content"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <div class="box-top">Something 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2014-12-11 01:45:38 dippas

使用您的移动第一种方法，请将样式规则放入480，然后放入640，对于我而言，无论屏幕大小如何，总是使用480。你能解释为什么会这样吗？ – SeekingTruth 2014-12-11 04:32:46

你可以创建一个小提琴，并告诉什么是错的，你想尝试实现？ – dippas 2014-12-11 09:39:08

尝试颠倒媒体查询的顺序。首先是最小的min-width。

说你的窗口宽度是700px。然后(min-width: 960px)和(min-width: 768px)不匹配并且被跳过，但是均为(min-width: 640px)和(min-width: 480px)这些块中的匹配样式将被应用，以便它们出现在CSS文件中。而后来样式覆盖以前的风格，例如：

p { color: green; } 
p { color: red; }

你p颜色是红色。

这个活生生的例子可能会更清楚一点：http://jsbin.com/yuqigedudi/1/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <style> 
    /* Default color when no media queries bellow match. 
    In this our case when window width < 200px */ 
    p { color: black } 

    /* If window size >= 200px */ 
    @media (min-width: 200px) { 
     p { color: red } 
    } 

    /* If window size >= 300px */ 
    @media (min-width: 300px) { 
     p { color: orange } 
    } 

    /* If window size >= 400px */ 
    @media (min-width: 400px) { 
     p { color: blue } 
    } 
    </style> 
</head> 
<body> 
    <p> 
    Resize this frame and see my color change! 
    </p> 
</body> 
</html>

来源

2014-12-11 00:19:54

ç你提供任何解释为什么会影响任何东西？此外，这并没有做任何事情...... – SeekingTruth 2014-12-11 00:20:46

切换媒体像你在更新后的帖子中显示的CSS也不起作用。我将所有不属于媒体查询的样式放置在所有媒体查询规则下（css是自顶向下的阅读器），但问题仍然相同。如果我在480px的@media中定义了一些内容，它会保留481+而不是被覆盖。 – SeekingTruth 2014-12-11 00:33:49

这仍然不适用于我，你的榜样，但我的事情不。虽然 – SeekingTruth 2014-12-11 01:17:40

在css中使用@media时骑行风格的样式

回答

相关问题