具有多個寬度的元素

是否可以給某個對象（例如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

具有多個寬度的元素

回答

相關問題