时间戳

首页 > 解决方案 > 是否可以在不使用 CSS 中的媒体查询的情况下保持段落的宽度（桌面 - 移动）？

css - 是否可以在不使用 CSS 中的媒体查询的情况下保持段落的宽度（桌面 - 移动）？

问题描述

在这里扩展标题。我的意思是，我在 div 中有一些文本，我希望在桌面模式下具有 75% 的宽度。问题出现在移动模式下，因为 div 显然仍然有 75% 的宽度，而且看起来很奇怪，它应该有 100%。当然，我可以通过媒体查询来解决这个问题，但似乎没有必要为了这个小修复而浪费几行 CSS 代码。有关进一步说明，请参见图像。

桌面版：https ://i.stack.imgur.com/q4PAR.png

手机版： https ://i.stack.imgur.com/SpmOI.png

当它只有 75% 宽度时，移动版看起来很奇怪。我是 CSS3 的新手，所以我只是想知道你们是否知道任何更好的方法，而不是一直使用媒体查询。

示例代码：

<div class="birch"> A lot of text </div>
.birch {width:75%}

谢谢！

标签： cssmedia-queries

解决方案

在某些情况下，最好使用max-width而不是width属性。

例如。

.birch {
  max-width: 480px;
}

这将为您在桌面上提供良好对齐的段落，并在移动设备上为您提供全尺寸段落。是的，计算 perfect 需要时间max-width，但它也让您可以自由地不编写任何额外的媒体查询。

推荐阅读