如何根据屏幕宽度调整边距大小？

Question

I have this HTML and CSS code for a webpage. 我有此HTML和CSS代码的网页。 I am trying to make the website mobile-friendly and resizes itself with the size of screen viewed. 我正在尝试使该网站适合移动设备使用，并根据查看的屏幕大小来调整自身大小。 I want the margins to become very small when viewed on a narrow screen like a smartphone and readjusts itself gradually when the screen is bigger and margins become larger and larger until it is a full screen of, say, a desktop computer. 我希望在像智能手机这样的狭窄屏幕上观看时，边距会变得很小，并且当屏幕更大时，边距会逐渐调整，并且边距会越来越大，直到它变成台式机的全屏为止。 However, this code isn't really working. 但是，此代码并没有真正起作用。 (I didn't include all the other CSS parts of this code, but please ask for it if needed!) （我没有在代码中包含所有其他CSS部分，但是如果需要，请提出要求！）

My attempt to resize margins due to the width of the screen: 由于屏幕的宽度，我试图调整边距的大小：

        @media (max-width: 1100px, min-width: 800px) {
            body {
                margin-right: 20px;
                margin-left: 20px;
            }

        @media (max-width: 750px, min-width: 501) {
            body {
                margin-right: 5vw;
                margin-left: 5vw;
            }
        }   
        @media (max-width: 500px) {
            body {
                margin-right: 2vw;
                margin-left: 2vw;
            }
        }
    </style>
</head>
<body>
    <header>

        <h1>Blog</h1>
        <ul> <!-- Menu Tabs -->
            <li><a href="#">Home</a></li>
            <li><a href="#">Art</a></li>
            <li><a href="#">Music</a></li>
        </ul>
    </header>
</body>

Thanks, I would really appreciate your help! 谢谢，非常感谢您的帮助！

Answer 1

You are missing a closing brace around your first media query. 您在第一个媒体查询中缺少左括号。 Also, you have some extra bits in your media queries making them invalid. 另外，媒体查询中还有一些额外的位，使它们无效。 The way media queries work makes the min-width parts you were trying to add unnecessary. 媒体查询的工作方式使您要添加的min-width部分变得不必要。 The following code, at large screens, creates a 20px left/right margin. 在大屏幕上，以下代码创建了20px左/右页边距。 When the threshold of 750px is hit, 5vw kicks in, and so on. 达到750px的阈值时， 5vw启动5vw ，依此类推。

/* Invalid: 
   @media (max-width: 1100px, min-width: 800px) 
*/

@media (max-width: 1100px) {
  body {
    margin-right: 20px;
    margin-left: 20px;
  }
}

@media (max-width: 750px) {
  body {
    margin-right: 5vw;
    margin-left: 5vw;
  }
}

@media (max-width: 500px) {
  body {
    margin-right: 2vw;
    margin-left: 2vw;
  }
}

If your intention is to start with a default 20px right/left margin, for screens even larger than 1100px , you could create a default margin in your CSS which will be overridden by your media query rules. 如果您打算以默认的20px左右边距开始，则对于大于1100px屏幕，您可以在CSS中创建默认的边距，该默认边距将被媒体查询规则覆盖。 Then, you can begin your media queries at a narrower screen size. 然后，您可以以较小的屏幕尺寸开始媒体查询。

/* default size */
body {
  margin-left: 20px;
  margin-rights: 20px;
}

@media (max-width: 750px) {
  body {
    margin-right: 5vw;
    margin-left: 5vw;
  }
}

@media (max-width: 500px) {
  body {
    margin-right: 2vw;
    margin-left: 2vw;
  }
}

https://jsfiddle.net/5vez3rdc/ https://jsfiddle.net/5vez3rdc/

如何根据屏幕宽度调整边距大小？

问题描述

1 个解决方案

解决方案1
1 2016-07-03 19:23:29

如何根据屏幕宽度调整边距大小？

问题描述

1 个解决方案

解决方案1 1 2016-07-03 19:23:29

解决方案1
1 2016-07-03 19:23:29