具有多个宽度的元素

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

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

2017-10-19 Moritz

是的，看看'max-width' css属性。 – Nick

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

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

如果你想要有很多不同的宽度，根据不同的屏幕尺寸，CSS media queries是要走的路，正如另一位解释者所解释的。

来源

2017-10-19 17:31:16 ncardeli

这很简单。 –

乐于帮助，欢迎来到Stack Overflow。如果此答案或任何其他人解决了您的问题，请将其标记为已接受 – ncardeli

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

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

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

来源

2017-10-19 17:29:47 Peril

媒体查询

Media Queries Demystified

你的CSS看起来像：

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

此设置元素的大小，然后说：如果屏幕是这样的宽度或更小，做这个。

来源

2017-10-19 17:32:28

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

div { 
    width: 720px; 
} 

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

来源

2017-10-19 17:33:41

应该使用多个CSS中的多个大小，例如：

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

或使用免费的和完整，灵活的框架，为了这个目的好像

引导

在网络上构建响应式，移动优先项目，与全球最受欢迎的前端组件库。

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

来源

2017-10-19 17:39:32 AmirhosseinYari

具有多个宽度的元素

回答

相关问题