blocks|key|170857|text|使用@media+queries。他们就是为了这个目的。下面是一个它们是如何工作的例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|170858|@media+(max-width:+800px)+{
++/*+CSS+that+should+be+displayed+if+width+is+equal+to+or+less+than+800px+goes+here+*/
}|code-block|syntax|javascript|170859|这只适用于宽度等于或小于800px的设备。|170860|阅读有关Mozilla+Developer+Network上的媒体查询的更多信息。|170861|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-mediaqueries/|1|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries^0|2|6|2|E|0|0|0|0|4|P|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

Use <a href="http://www.w3.org/TR/css3-mediaqueries/"><code>@media</code> queries</a>. They serve this exact purpose. Here's an example how they work:

<pre class="lang-css prettyprint-override"><code>@media (max-width: 800px) {
 /* CSS that should be displayed if width is equal to or less than 800px goes here */
}
</code></pre>

This would work only on devices whose width is equal to or less than 800px.

Read up more about media queries on the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">Mozilla Developer Network</a>.

blocks|key|4676799|text|检测是自动的。您必须指定可用于每种屏幕分辨率的css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4676800|/*+for+all+screens,+use+14px+font+size+*/
body+{++
++++font-size:+14px;++++
}
/*+responsive,+form+small+screens,+use+13px+font+size+*/
@media+(max-width:+479px)+{
++++body+{
++++++++font-size:+13px;
++++}
}|code-block|syntax|javascript|4676801|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Detection is automatic. You must specify what css can be used for each screen resolution:

<pre><code>/* for all screens, use 14px font size */
body { 
 font-size: 14px; 
}
/* responsive, form small screens, use 13px font size */
@media (max-width: 479px) {
 body {
 font-size: 13px;
 }
}
</code></pre>

blocks|key|170982|text|我创建了一个小的javascript工具，在不使用媒体查询或重新编译bootstrap+css的情况下，在屏幕大小上设置元素的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170983|https://github.com/Heras/Responsive-Breakpoints|offset|length|170984|只需向任何元素添加类responsive-breakpoints，它就会自动向这些元素添加xs+sm+md+lg+xl类。|style|CODE|170985|演示：https://codepen.io/HerasHackwork/pen/rGGNEK|170986|entityMap|0|LINK|mutability|MUTABLE|url|1|https://codepen.io/HerasHackwork/pen/rGGNEK^0|0|0|1B|0|0|A|M|19|E|0|3|17|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@$D|10|E|11|H|I]|$D|12|E|13|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|L|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|C]]|S|$5|O|P|Q|A|$R|T]]]]

I created a little javascript tool to style elements on screen size without using media queries or recompiling bootstrap css:

<a href="https://github.com/Heras/Responsive-Breakpoints" rel="nofollow noreferrer">https://github.com/Heras/Responsive-Breakpoints</a>

Just add class <code>responsive-breakpoints</code> to any element, and it will automagically add <code>xs sm md lg xl</code> classes to those elements.

Demo: <a href="https://codepen.io/HerasHackwork/pen/rGGNEK" rel="nofollow noreferrer">https://codepen.io/HerasHackwork/pen/rGGNEK</a>

blocks|key|4676857|text|@media查询服务于此目的。下面是一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4676858|@media+only+screen+and+(max-width:+991px)+and+(min-width:+769px){
+/*+CSS+that+should+be+displayed+if+width+is+equal+to+or+less+than+991px+and+larger+
++than+768px+goes+here+*/
}

@media+only+screen+and+(max-width:+991px){
+/*+CSS+that+should+be+displayed+if+width+is+equal+to+or+less+than+991px+goes+here+*/
}|code-block|syntax|javascript|4676859|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

@media queries serve this purpose. Here's an example:

<pre><code>@media only screen and (max-width: 991px) and (min-width: 769px){
 /* CSS that should be displayed if width is equal to or less than 991px and larger 
 than 768px goes here */
}

@media only screen and (max-width: 991px){
 /* CSS that should be displayed if width is equal to or less than 991px goes here */
}
</code></pre>

Bootstrap 3 has nice CSS classes in responsive utilities that allow me to hide or show some blocks depending upon the screen resolution <a href="http://getbootstrap.com/css/#responsive-utilities-classes" rel="noreferrer">http://getbootstrap.com/css/#responsive-utilities-classes</a>

I have some style rules in a CSS file that I want to be applied or not based on screen resolution.

How can I do it?

I'm going to minimize all my CSS files into the one on production deployment, but this could be avoided if there are no other solutions than having separate CSS files for different screen resolutions.

How to use particular CSS styles based on screen size / device

Bootstrap 3在响应式实用程序中有很好的CSS类，允许我根据屏幕分辨率隐藏或显示一些块。我在CSS文件中有一些样式规则，希望根据屏幕分辨率应用或不应用。我该怎么做呢？我打算将我所有的CSS文件最小化到生产部署上的一个CSS文件中，但是如果除了为不同的屏幕分辨率使用单独的CSS文件之外没有其他解决方案，这种情况是...

问如何根据屏幕大小/设备使用特定的CSS样式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据屏幕大小/设备使用特定的CSS样式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据屏幕大小/设备使用特定的CSS样式
EN