Bootstrap xs断点的问题[已关闭]

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
2天前关闭。
Improve this question
“大家好，我是这个领域的新手，目前正在做Coursera的HTML，CSS，JS课程的第三个模块作业。问题是，当我在@media（max-width：767 px），则结果不会以767 px显示，而仅适用于最大值为766 px的屏幕尺寸。
为什么会发生这种情况，我能做些什么来解决这个问题？
以下是git链接：
Website
Git repository
谢谢你的时间。

@media (max-width: 767px){
h1{
    color: red;
}}  

<div class="main-content container">
<div class="row">

    <h1 class="text-center">Our menu</h1>
    <div class="col-xs-12">
      <h2 class="text-center">Chicken</h2>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
      </p>
    </div>
  
</div>

这就是媒体查询的工作方式。看我下面的例子和评论来解释它。按“运行代码示例”按钮，然后按“全页”链接。现在调整浏览器窗口的大小，以查看应用于不同宽度的不同样式。
请注意媒体提问的顺序。当浏览器宽度更改时，需要它们覆盖以前的大小。

const display=document.querySelector('#size-display');
const resizeFn=()=>{display.innerHTML = window.innerWidth;};
window.addEventListener('resize',resizeFn);
resizeFn();

h1 {
  /*Default styles to apply*/
  color: #333;
  border: 1px solid green;
}

@media (max-width: 900px){
  /*
  These styles override any other styles when: the screen has a maximum width of 900px.
  Another way of saying that is: the screen is 899px wide or smaller
  */
  h1{
    color: blue;
    background-color: #CCC;
  }
}

@media (max-width: 767px){
  /*
  These styles override any other styles when: the screen has a maximum width of 767px.
  Another way of saying that is: the screen is 766px wide or smaller
  */
  h1{
    color: red;
  }
}

<div>Width: <span id="size-display"></span>px</div>

<h1>Test</h1>

所以这个行得通。。但是，建议您以与您正在执行的操作相反的方式执行此操作。在你的媒体查询中使用min-width，你的默认样式应该是尽可能小的浏览器大小，然后随着浏览器大小的增加，你添加更多的样式或覆盖以前的样式。这样写和理解起来也容易得多。

const display=document.querySelector('#size-display');
const resizeFn=()=>{display.innerHTML=window.innerWidth;};
window.addEventListener('resize',resizeFn);
resizeFn();

h1 {
  /*Default styles to apply*/
  color: #333;
  border: 1px solid green;
}

@media (min-width: 767px){
  /*
  These styles override any other styles when: the screen has a minimum width of 767px.
  Another way of saying that is: the screen is 768px wide or LARGER
  */
  h1{
    color: red;
  }
}

@media (min-width: 900px){
  /*
  These styles override any other styles when: the screen has a minimum width of 900px.
  Another way of saying that is: the screen is 901px wide or LARGER
  */
  h1{
    color: blue;
    background-color: #CCC;
  }
}

<div>Width: <span id="size-display"></span>px</div>

<h1>Test</h1>

Bootstrap xs断点的问题[已关闭]

2条答案

相关问题

热门标签

最新问答