使用帶有類名的媒體查詢來更改網站寬度

我有一個移動應用程序，我想全屏放大。 Twitter Bootstrap爲我提供了手機，平板電腦和所有這些信息的大小。我想要一個CSS類來處理所有不同類型的大小。我在尋找這樣的事情：使用帶有類名的媒體查詢來更改網站寬度

@media (max-width: 480px) classname 

@media (max-width: 767px) classname

等

來源

2012-07-10 user516883

我並不確定你真正想要什麼，但這些鏈接應該會對你有所幫助：[[] [「移動」你的HTML5網站]（http://www.html5rocks.com/en/mobile/mobifying/）， [標準設備媒體查詢]（http://css-tricks.com/snippets/css/media-queries-for-standard-devices/） – 2012-07-10 16:31:12

像這樣的事情？

@media (max-width: 767px) { 
    .classname { 
    width: 80%; 
    } 
} 

@media (max-width: 480px) { 
    .classname { 
    width:100%; 
    } 
}

注意，具有較小max-width媒體查詢設定最後以允許其具有較大max-width覆蓋媒體查詢。

有關使用媒體查詢的更多信息，請參閱this article。

來源

2012-07-10 16:46:28

您也可以根據html元素和id更改css。的最大寬度從0作品到最大給出寬度，或者如果最小寬度給出然後從給定最小寬度一起最大寬度。例如

@media screen and (max-width: 767px) { 
 
\t #YourElementId{ 
 
\t \t width:100%; 
 
\t } 
 
\t YourElementName { 
 
\t \t width:80%; 
 
\t } 
 
\t }

上面的CSS將工作從0到最大給出媒體屏幕的寬度。

在另一方面，最小寬度適用於超過給定的寬度例如

@media screen and (min-width: 768px) { 
 
    #YourElementID { 
 
\t \t width:80%; 
 
\t } 
 
    Body { 
 
\t \t width:75%; 
 
\t }/*for body tag*/ 
 

 
\t }

這將工作僅當媒體屏幕的寬度寬度爲更多比768px。

我試圖在簡單語言中解釋它。我希望你會喜歡。快樂編碼。

來源

2015-12-23 10:25:41

使用帶有類名的媒體查詢來更改網站寬度

回答

相關問題