Question

我设置了70％的宽度，看起来不错，但对于移动屏幕，如果宽度更高，则不会受到伤害，比如说90％。

所以我的问题是......如果屏幕较小，有没有办法让网站的宽度更高？

Answer 1

您应该使用媒体查询：

div {
width:70%;
}

@media only screen and (max-width: 500px) {
    div {
        width:90%;
    }
}

Get a head start on media queries

或使用像bootstrap

这样的框架

使用bootstrap，您可以使用以下方法实现：

<div class="col-md-10 col-md-offset-1 col-xs-12">blah blah</div>

Answer 2

对媒体查询有点了解：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

.content {
   width: 70%;
 }

@media (max-width: 600px) {
 .content {
   width: 90%;
 }
}

Answer 3

您可以将尺寸媒体查询与分辨率媒体查询结合使用：

@media (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browser */
       (max-width: 600px) and (min-resolution: 2dppx), /* The standard way */            
       (max-width: 600px) and (min-resolution: 192dpi) /* dppx fallback */

CSS我可以在较小的屏幕上设置更高的％宽度吗？

3 个答案: