响应式设计/媒体查询/CSS

Question

index.html 页面似乎无法正常工作 - 它在智能手机上没有响应。但是页面 hand.html 工作正常。我已经尝试过媒体查询

有人知道如何解决我的问题吗？

https://christine445.github.io/index.html

这是我索引的代码-stylesheet.css:

@media only screen and (min-width: 1200px) {
  .container {
    padding-right: .5rem;
    padding-left: .5rem;
    width: calc(1200px - 1rem);
    max-width: 100%;
  }
}

@media only screen and (min-width: 992px) {
  /* Pushes picture left a bit */
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-6 {
    flex-basis: 43%;
    max-width: 43%;
  }
  .col-lg-offset-2dot5 {
    margin-left: 20.83333333%;
  }
  .col-lg-offset-1dot5 {
    margin-left: 8.5%;
  }
}
    /* Ending Screen */

@media only screen and (min-width: 768px) and (max-width:992px) {
  .col-md-offset-4 {
      margin-left: 33.33333333%;
  }
  .col-md-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  h4 {
    font-size: 1.3rem;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }


@media screen and (max-width: 425px) {
  .Home .name {
    font-size: 3.5em;
  }
  .work-thumbnail {
    margin-bottom: 280px;
  }
  .global-nav > .container {
    padding: 15px;
  }
  .global-nav.-collapse > .container {
    padding: 2px 20px;
  }
  .nav-list {
    text-align:right;
  }
  .nav-list > .link {
    display: block;
    margin: 7px 8px;
    font-size: .9em;
  }
}

Answer 1

您确实声明了

<meta name="viewport" content="width=device-width, initial-scale=1">

但它在 <script> 标签内。请验证您的 HTML 代码。以确保没有任何错误。 https://validator.w3.org/

响应式设计/媒体查询/CSS

Responsive Design / Media Queries / CSS

css

media

responsive