我是一名初级网络开发者，我正在建立我的第一个网站，作为公司的实习生。 我使用bootstrap来制作结构，但是当我调整Chrome的大小时，col-xs-12类似乎在892px而不是767px时崩溃。为什么会这样？这是我的媒体查询结构，如果它有帮助。
似乎有些元素对其媒体查询属性的反应比应该发生的要晚。例如，在max-width 639上，如果我将属性设置为元素，则检查器仅在559处读取它们。任何关于为什么会发生这种情况的想法？我现在一直想找几个小时的解决方案。 ：（
*/
/*------------------------------------------------*/
/*-----------------[MEDIA QUERIES]----------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*-----------------[ 0 - 1919 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 1919px){
body{
background: peru;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 1599 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 1599px){
body{
background: lightcoral;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 1359 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 1359px){
body{
background: lightblue;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 1199 ]-------------*/
/*------------------ Bootstrap MD ----------------*/
/*------------------------------------------------*/
only screen and (max-width : 1199px){
body{
background: magenta;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 1079 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 1079px){
body{
background: lightgreen;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 991 ]-------------*/
/*------------------ Bootstrap SM ----------------*/
/*------------------------------------------------*/
only screen and (max-width : 991px){
body{
background: cyan;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 767 ]-------------*/
/*------------------ Bootstrap XS ----------------*/
/*------------------------------------------------*/
only screen and (max-width : 767px){
body{
background: violet;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 719 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 719px){
body{
background: brown;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 639 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 639px){
body{
background: pink;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 559 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 559px){
body{
background: yellow;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 479 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 479px){
body{
background: blue;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 399 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 399px){
body{
background: orange;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 359 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 359px){
body{
background: green;
}
}
/*------------------------------------------------*/
/*-----------------[ 0 - 319 ]-------------*/
/*------------------------------------------------*/
only screen and (max-width : 319px){
body{
background: red;
}
}
/*------------------------------------------------*/
/*-------------------[THE END]--------------------*/
/*------------------------------------------------*/
好的，一个小小的更新。我的bootstrap col XS似乎有一个691px而不是767px的断点。我尝试在本地链接bootstrap，从CDN，评论媒体查询，它仍然表现相同......有50-100px的差异（取决于媒体查询），使一切都变得朦胧。