如何使用不同的样式表进行bootstrap 3个不同的视图?

时间:2013-12-29 17:28:45

标签: javascript jquery html css twitter-bootstrap

我想将mobile.css.less用于mobile,将wide.css.less用于pc视图,依此类推。我知道hidden-xsvisible-xscss classes等等,但我想以某种方式为<link rel="stylesheet/less" type="text/css" href="assets/css/mobile.css.less">使用其中一项功能。我怎么能这样做?

1 个答案:

答案 0 :(得分:1)

尝试使用媒体查询指定不同的特定屏幕尺寸和像素比率,以确定应使用哪种样式表。

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

这是一个很好的指南:http://css-tricks.com/css-media-queries/

你可以将它与hidden-xs中的twitter bootstrap general.css等类一起使用,因为我想你会在你的主题中有一些共同的CSS。