使用带有类名的媒体查询来更改网站宽度

我有一个移动应用程序，我想全屏放大。 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

使用带有类名的媒体查询来更改网站宽度

回答

相关问题