小编Joy*_*ech的帖子

移动问题,修改Bootstrap类或错误的媒体查询

正如你所看到的,我的媒体查询变得一团糟.我正在用子弹创建这个时间轴,并且自己写了太多的媒体查询,试图让子弹与时间轴保持一致

我非常相信我在某个地方犯了一个错误.无论是在非媒体查询的css部分,也许在绝对区域的位置.我只是无法指出对齐.我的要求不是任何特定的屏幕尺寸,所以,我必须让所有这些都做得最好,我正在通过使浏览器宽度越来越小来进行测试.有没有自助解决方案？我是以错误的方式编写媒体查询吗？

html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
.project-methodology-wrap {
  padding: 5rem 0;
 /*========== Media queries ==========*/ …

Run Code Online (Sandbox Code Playgroud)

css css3 media-queries twitter-bootstrap bootstrap-4

jsP*_*yer

2019 02-23

5
推荐指数

1
解决办法

149
查看次数

css-grid 媒体查询没有响应

我正在使用网格，出于某种原因，max-width在媒体查询中使用似乎没有任何作用。代码如下：

代码：

body {
  color: #fff;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1rem;
  grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}

@media only screen and (max-width:700px) {
  #content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1rem;
    grid-template-areas: 'header' 'block_1' 'block_2'
  }
}

#content>* {
  background-color: #fff;
  border: 1px solid black;
}

.header {
  grid-area: header;
  height: 150px;
}

.block_1 {
  grid-area: block_1;
  height: 150px;
} …

Run Code Online (Sandbox Code Playgroud)

css css-grid

Jos*_*ers

2019 02-05

2
推荐指数

1
解决办法

2721
查看次数