媒体查询：根据屏幕大小限制一些CSS样式 [英] media queries : limit some css styles according to the screen size

问题描述

当我在layout.css中编写一些样式时，它适用于每个屏幕大小，在/ * #Media Queries
部分中，您有以下几个部分：

  / *小于标准960（设备和浏览器）* / 
 / *平板电脑肖像大小到标准960（设备和浏览器）* / 
 /尺寸（设备和浏览器）* / 
 / *移动肖像尺寸到移动景观尺寸（设备和浏览器）* / 
  

我应该在哪里写大屏幕特定的CSS代码？

解决方案

假设你有一个div < div claas =example> < / div>

现在为 .example 写一个css应用于大于您在媒体查询中提及的范围的那些屏幕

  .example {
 / * ..更大的屏幕风格在这里.... * / 
} 
 @media屏幕和（max-width：1400px）{
 .example {
 /*...now给这些屏幕的风格小于1400px ... * / 
} 
} 
 @media屏幕和（max-width：1300px）{
 .example {
 /*...now给那些屏幕小于1300px的样式... * / 
} 
} 
  

在上面的代码中你提到了三种不同的样式

1. 1400px屏幕尺寸






< $ b

EDIT ::




/ *大于标准960（设备和浏览器） /








  .example {
 /*..style .... * / 
} 
 @media屏幕和（max-width：960px）{
 .example {
 /*..style小于或等于960 px ... * / 
} 
} 
  




when I write some style in layout.css it applies in every screen size and in /* #Media Queries section, you have these sections:

/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* All Mobile Sizes (devices and browser) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

so none of these do what I want.

Where should I write large screen specific css codes?

解决方案

suppose you have a div like <div claas="example"> </div>

now write a css for .example which will be applied for those screen which are larger than range you mentioned in your media query

.example{
  /*..for larger screen style goes here....*/
 }
@media screen and (max-width: 1400px) { 
  .example {
    /*...now give style for those screen which are less than 1400px...*/
  }
}
@media screen and (max-width: 1300px) {
  .example {
    /*...now give style for those screen which are less than 1300px...*/
  }
}

in the above you code you mention three different styles for

1. >1400px screen size
2. for 1300 to 1400px screen size
3. <1300px screen size

EDIT::

"/* Larger than standard 960 (devices and browsers) */"

.example{
  /*..style for larger than 960px....*/
 }
@media screen and (max-width: 960px) { 
  .example {
    /*..style for lesser than or equal to 960 px...*/
  }
}

这篇关于媒体查询：根据屏幕大小限制一些CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！