Question

我之前已经问过这个问题，但所有建议的答案对我都没有用。我正在尝试创建一个响应式网站，虽然它在浏览器中工作得很好（当我调整大小时），但当我在移动设备上打开网站时，我只能获得完整的桌面版本。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>LaVida Cake</title>
    <link rel="stylesheet" href="main2.css">
    <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Sacramento" rel="stylesheet">
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>

我确保<meta>标记符合其他答案的建议，但仍未在移动设备上获得正确的功能。请耐心等待，这是我的第一个网站，非常感谢您的帮助。

提前致谢

更新：

css文件

    body {
        background-image: url(pexels-photo-132694smaller.jpeg);

        background-attachment: fixed;
        background-size: cover;
    }

    /* **********PHONE SCREEN********** */

    @media screen and (max-width: 640px){
      #leftSide {
        display: none;
      }

      #rightside {
        display: none;
      }

      #emptyLeft {
        display: none;
      }

      #emptyRight {
        display: none;
      }

      .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
          "logo"
          "main"
          "footer";
      }

      #menu {
        display: none;
        text-align: center;
        grid-area: menu;
      }

      /* #menu ul li{
          display: inline;
          margin-right: 50px;
          font-size: 2em;
          font-family: 'Sacramento', cursive;
      }
      #menu ul li a {
          text-decoration: none;
          color: #d83444;
      }
      #menu ul li a:visited{
          text-decoration: none;
          color: #d83444;
          font-weight: normal;
      }
      #menu ul li a:hover {
          font-weight: bold;
      } */

      #logo {

          text-align: center;
          grid-area: logo;

      }

      #logo h1 {
        font-family: 'Great Vibes', cursive;
        font-size: 3em;
        padding: 10px 10%;
        color: #d83444;
      }

      #main {
          text-align: center;
          grid-area: main;
          background-color: rgba(255,255,255,0.5);
          padding: 3%;
      }

      #main h1 {
          font-size: 2em;
          font-family: 'Great Vibes', cursive;
          color: #d83444;
          letter-spacing: 7px;

      }

      #main p {
          font-size: 1.8em;
          max-width: 800px;
          margin: 20px auto;
          font-family: 'Sacramento', cursive;
          text-align: justify;
          color: #d83444;
      }

      #main p a {
        text-decoration: none;
        color: #d83444;
      }

      #main p a:visited {
        text-decoration: none;
        color: #d83444;
        font-weight: normal;
      }

      #main p a:hover {
        font-weight: bold;
      }

      #footer {
        grid-area: footer;
        text-align: center;
      }

      #footer ul li{

          display: inline;
          margin-right: 50px;
          font-size: 1.5em;
          font-family: 'Sacramento', cursive;
      }

      #footer ul li:first-child{
        display: none;
      }

      #footer ul li a {
          text-decoration: none;
          color: #d83444;
      }

      #footer ul li a:visited{
          text-decoration: none;
          color: #d83444;
          font-weight: normal;
      }

      #footer ul li a:hover {
          font-weight: bold;
      }

    }


    /* **********TABLET SCREEN********** */

    @media screen and (max-width: 959px) and (min-width: 641px){
      #leftSide {
        display: none;
      }

      #rightside {
        display: none;
      }

      .container {
        display: grid;
        grid-template-columns: 0.1fr 1fr 0.1fr;
        grid-template-areas:
          "emptyLeft menu emptyRight"
          "emptyLeft logo emptyRight"
          "emptyLeft main emptyRight"
          "emptyLeft footer emptyRight";
      }

      #emptyLeft {
        grid-area: emptyLeft;
      }

      #emptyRight {
        grid-area: emptyRight;
      }

      #menu {
        text-align: center;
        grid-area: menu;
      }

      #menu ul li{
          display: inline;
          margin-right: 50px;
          font-size: 2.5em;
          font-family: 'Sacramento', cursive;

      }

      #menu ul li a {
          text-decoration: none;
          color: #d83444;
      }

      #menu ul li a:visited{
          text-decoration: none;
          color: #d83444;
          font-weight: normal;
      }

      #menu ul li a:hover {
          font-weight: bold;
      }

      #logo {

          text-align: center;
          grid-area: logo;

      }

      #logo h1 {
        font-family: 'Great Vibes', cursive;
        font-size: 5em;
        letter-spacing: 7px;
        padding: 10% 10%;
        color: #d83444;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: rgba(250,250,250,0.5);
      }

      #main {
          text-align: center;
          grid-area: main;
          background-color: rgba(255,255,255,0.5);
          padding: 3%;
      }

      #main h1 {
          font-size: 3em;
          font-family: 'Great Vibes', cursive;
          color: #d83444;
          letter-spacing: 7px;

      }

      #main p {
          font-size: 2.5em;
          max-width: 800px;
          margin: 20px auto;
          font-family: 'Sacramento', cursive;
          text-align: justify;
          color: #d83444;
      }

      #main p a {
        text-decoration: none;
        color: #d83444;
      }

      #main p a:visited {
        text-decoration: none;
        color: #d83444;
        font-weight: normal;
      }

      #main p a:hover {
        font-weight: bold;
      }

      #footer {
        grid-area: footer;
        text-align: center;
      }

      #footer ul li{

          display: inline;
          margin-right: 50px;
          font-size: 2em;
          font-family: 'Sacramento', cursive;
      }

      #footer ul li a {
          text-decoration: none;
          color: #d83444;
      }

      #footer ul li a:visited{
          text-decoration: none;
          color: #d83444;
          font-weight: normal;
      }

      #footer ul li a:hover {
          font-weight: bold;
      }

    }

    /* **********FULL SCREEN********** */

    @media screen and (min-width: 959px){
      .container {
            display: grid;
            grid-template-columns: repeat(2,minmax(0%,0.5fr)) minmax(300px,4fr) repeat(2,minmax(0%,0.5fr)) ;
            grid-template-areas:
                "leftSide emptyLeft menu emptyRight rightSide"
                "leftSide emptyLeft logo emptyRight rightSide"
                "leftSide emptyLeft main emptyRight rightSide"
                "leftSide footer footer footer right";

      }

      #leftSide {
        grid-area: leftSide;
      }

      #leftSide img {
        max-width: 100%;
        margin-top: 50px;
        margin-bottom: 50px;
      }

      #leftSide img:hover {
        transform: scale(1.2);
      }

      #emptyLeft {
        grid-area: emptyLeft;
      }

      #menu {
        text-align: center;
        grid-area: menu;
      }

      #menu ul li{
        display: inline;
        margin-right: 50px;
        font-size: 3.5em;
        font-family: 'Sacramento', cursive;
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: rgba(255,255,255,0.8);
      }

      #menu ul li :nth-of-type(3) {
        margin-right: 0;

      }

      #menu ul li a {
        text-decoration: none;
        color: #d83444;
      }

      #menu ul li a:visited{
        text-decoration: none;
        color: #d83444;
        font-weight: normal;
      }

      #menu ul li a:hover {
        font-weight: bold;
      }

      #logo {
        text-align: center;
        grid-area: logo;

      }

      #logo h1 {
        font-family: 'Great Vibes', cursive;
        font-size: 8em;
        padding: 10% 10%;
        color: #d83444;
        letter-spacing: 7px;
        -webkit-text-stroke-width: 1.5px;
        -webkit-text-stroke-color: rgba(250,250,250,0.5);
      }

      #main {
          text-align: center;
          grid-area: main;
          background-color: rgba(255,255,255,0.5);
          padding: 3%;
      }

      #main h1 {
          font-size: 4em;
          font-family: 'Great Vibes', cursive;
          color: #d83444;
          letter-spacing: 7px;
          -webkit-text-stroke-width: 1px;
          -webkit-text-stroke-color: rgba(250,250,250,0.5);
      }

      #main p {
          font-size: 3.2em;
          max-width: 800px;
          margin: 50px auto;
          font-family: 'Sacramento', cursive;
          text-align: justify;
          color: #d83444;
      }

      #main p a {
        text-decoration: none;
        color: #d83444;
      }

      #main p a:visited {
        text-decoration: none;
        color: #d83444;
        font-weight: normal;
      }

      #main p a:hover {
        font-weight: bold;
      }

      hr {
         max-width: 800px;
      }

      #emptyRight {
        grid-area: emptyRight;
      }

      #rightside {
        grid-area: rightSide;
      }

      #rightside img {
          max-width: 100%;
          margin-top: 50px;
          margin-bottom: 50px;
      }

      #rightside img:hover {
          transform: scale(1.2);
      }

      #footer {
          text-align: center;
          grid-area: footer;
      }

      #footer ul li{
          display: inline;
          margin-right: 50px;
          font-size: 2.5em;
          font-family: 'Sacramento', cursive;
          -webkit-text-stroke-width: 0.3px;
          -webkit-text-stroke-color: rgba(255,255,255,0.8);
      }

      #footer ul li :nth-of-type(3) {
          margin-right: 0;
      }

      #footer ul li a {
          text-decoration: none;
          color: #d83444;
      }

  #footer ul li a:visited{
      text-decoration: none;
      color: #d83444;
      font-weight: normal;
  }

  #footer ul li a:hover {
      font-weight: bold;
  }
}

2018年3月15日更新

我在评论中提到过这一点，但在问题正文中却没有。我正在使用CSS网格进行网站布局。最初我认为移动浏览器可能不支持CSS网格，但似乎并非如此。我不确定，但这可能是我的媒体查询的写法吗？含义min-width和max-width的含义有些混淆？在不同视口中查看时使用的内容是否重要？

Answer 1

您使用的是CSS框架吗？即Materialise，Bootstrap

如果您只使用CSS中的main2.css，那么您将需要使用媒体查询来满足您不想回应的每个断点。

meta - viewport代码无法使您的CSS响应，它让浏览器知道该网站针对移动设备进行了优化。

<强>更新

我建议你看看 this article about responsive layouts with CSS grids。这应该回答您的问题，让您的CSS grids在移动设备和桌面设备上运行。

使用@media查询可以使网站在浏览器中响应，但在移动设备上只会打开完整的桌面版本

1 个答案: