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

Question

我在我的上设置了 70% 的宽度，这看起来不错，但对于移动设备屏幕来说，如果宽度更高（比如 90%）也不会受到影响。

所以我的问题是...如果屏幕较小，是否有办法使网站的宽度百分比更高？

Answer 1

关于媒体查询的一些简单阅读：

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 2

你应该为此使用媒体查询：

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 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 我可以在较小的屏幕上设置较高的 % 宽度吗？

CSS Can I set a higher % width on smaller screens?

html

css

width

percentage