CSS 我可以在较小的屏幕上设置更高的百分比宽度吗？答案

【问题标题】：CSS Can I set a higher % width on smaller screens?CSS 我可以在较小的屏幕上设置更高的百分比宽度吗？
【发布时间】：2016-01-17 01:30:30
【问题描述】：

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

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

【问题讨论】：

标签： html css width percentage

【解决方案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%;
 }
}

【讨论】：

你的代码帮不了他，因为你把内容设置为90%后，你又设置为70%。你必须以相反的顺序来处理它们。首先不用媒体查询，然后使用媒体查询。
当我在计算机上调整窗口大小但不知何故我的手机仍然显示 70% 宽度的版本时，这有效？我猜是因为我手机的分辨率是高清的？

【解决方案2】：

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

div {
width:70%;
}

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

Get a head start on media queries

或者使用像bootstrap这样的框架

使用引导程序，您可以通过以下方式实现：

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

【讨论】：

当我在计算机上调整窗口大小但不知何故我的手机仍然显示 70% 宽度的版本时，这有效？我猜是因为我手机的分辨率是高清的？
我想是的。尝试使用大于手机像素宽度的值代替 500。
可能 800px 到 900px 对你来说是一个合适的值。
我尝试了高达 1000px 的任何东西，但这并没有真正达到我想要的效果
您尝试过引导选项吗？我个人从未接受过原始媒体查询。我对 bootstrap 很满意。

【解决方案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 */

【讨论】：