CSS類而不是媒體查詢

想知道是否有任何方法/技術可以讓您用類名替換媒體查詢。CSS類而不是媒體查詢

例如

.header { width: 100% } 
.tablet .header { width: 50%; float: left; } 
.phone .header { width: 100%; max-width: 320px;}

所以.tablet或.phone得到應用到像<html class="phone">

html標籤會不會有一種方法/編制得到這樣的工作嗎？還是需要使用JavaScript來改變元素上的類？

感謝

來源

2013-07-27 Owen

這將需要JavaScript。 twitter引導正在做類似他們的類。見[這裏]（http://twitter.github.io/bootstrap/css/#responsive-utilities） – Dogoku

你可以用一些服務器端代碼來做到這一點，但是保持更新可能會很痛苦。這個[answer]（http://stackoverflow.com/questions/8970800/is-server-side-useragent-detection-bad#answer-10063997）有一些很好的信息 – kalley

@Dogoku TW Bootstrap在媒體查詢中使用'classes' '。 –

你所描述需要的JavaScript，因爲HTML需要爲了改變這種情況發生

有工具，有幫你媒體的質疑反應在JavaScript中，如驚人的Enquire.js

但是，如果你正在尋找一些東西，不需要JS，你可以使用SASS，我會建議使用CSS Wizardy's responsive grid它可以幫助你生成你想要的佈局

我們使用它來構建我們自己的移動優化嵌入，我們發現它非常強大且易於使用。

希望它有幫助

來源

2013-07-27 17:26:14 Dogoku

您可以只爲不同的設備使用不同的樣式表。使用相同的類，沒有媒體查詢

<link rel="stylesheet" media="screen and (min-width: 901px)" href="css/large.css" /> 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

來源

2013-07-27 19:25:35 Vector

CSS類而不是媒體查詢

回答

相關問題