Question

是否可以为对象（例如div或img）提供多个宽度？因此，对象的正常宽度为720像素，但当用户的屏幕尺寸小于720像素时，元素会自动将其宽度更改为100％？

如果有一个只使用HTML或CSS并且不包含任何JavaScript的解决方案会很好，因为我并不熟悉它。（但是，如果JavaScript是实现这一目标的唯一方法，或者使用JavaScript非常简单，请像我一样解释它）

Answer 1

是的，一种可能的方法是使用max-width和width：

.foo {
  max-width: 720px;
  width: 100%;
}

如果你想拥有许多不同的宽度，根据不同的屏幕尺寸，CSS media queries是要走的路，正如另一个anwser所解释的那样。

Answer 2

您可能想要查看media queries。这些允许您为不同的屏幕尺寸设置不同的CSS。

许多媒体功能都是范围功能，这意味着它们可以以“min-”或“max-”作为前缀，以表示“最小条件”或“最大条件”约束。例如，只有当浏览器的视口宽度等于或小于12,450px时，此CSS才会应用样式：

@media (max-width: 12450px) { ... }

Answer 3

媒体查询

Media Queries Demystified

您的CSS将如下所示：

.element {
    width: 75%;
}
@media screen and(max-width: 720px){
    .element{
       width: 100%;
    }
}

这会设置元素的大小，然后说：如果屏幕是此宽度或更小，请执行此操作。

Answer 4

在CSS中，您可以使用@media以及选择器和谓词的各种组合来查询屏幕的类型和大小。以下将提供一个测试，即介质是一个屏幕（而不是打印），屏幕的最大宽度是720像素）：

div {
    width: 720px;
}

@media screen and (max-width: 720px) {
    div {
        width: 100%;
    }
}

Answer 5

你应该使用多个大小的多个css，例如：

@media (max-width: 700px) {
   .item{
         width:100%;
        }
 }
@media (max-width: 1100px) {
   .item{
        width:80%;
        }
 }

或为此目的使用免费，完整和灵活的框架，如

自举

与全世界一起在网络上构建响应迅速，移动优先的项目   最流行的前端组件库。

Bootstrap是一个开源工具包，用于开发HTML，CSS和   JS。快速制作您的想法原型或使用我们的构建您的整个应用程序   Sass变量和mixins，响应式网格系统，广泛的预建   组件，以及基于jQuery构建的强大插件。   Bootstrap

多个宽度的元素

5 个答案: