What is a Media Query?

sam
sam
134 Points
62 Posts

Hi,

  • What is a Media Query?
  • What is the syntax?
  • How can we use?

Please help...

Views: 8189
Total Answered: 3
Total Marked As Answer: 0
Posted On: 26-Dec-2015 09:36

Share:   fb twitter linkedin
Answers
Rahul Maurya
Rahul M...
Moderator
1172 Points
211 Posts
         

Hi sam,

Media query is a CSS technique (different style rules for different media types/devices) introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is fulfilled.

It has syntax as:

@media not|only mediatype and (media feature) {
     CSS-Code;
}

Where 

Media Types

  • all: Used for all media type devices
  • screen: Used for computer screens, tablets, smart-phones etc.
  • speech: Used for screen readers that "reads" the page out loud

Media Features

  • aspect-ratio: The ratio between the width and the height of the viewport
  • color: The number of bits per color component for the output device
  • color-index: The number of colors the device can display
  • device-aspect-ratio: The ratio between the width and the height of the device
  • device-height: The height of the device, such as a computer screen
  • device-width: The width of the device, such as a computer screen
  • grid: Whether the device is a grid or bitmap
  • height: The viewport height
  • max-aspect-ratio: The maximum ratio between the width and the height of the display area
  • max-color: The maximum number of bits per color component for the output device
  • max-color-index: The maximum number of colors the device can display
  • max-device-aspect-ratio: The maximum ratio between the width and the height of the device
  • max-device-height: The maximum height of the device, such as a computer screen
  • max-device-width: The maximum width of the device, such as a computer screen
  • max-height: The maximum height of the display area, such as a browser window
  • max-monochrome: The maximum number of bits per "color" on a monochrome (greyscale) device
  • max-resolution: The maximum resolution of the device, using dpi or dpcm
  • max-width: The maximum width of the display area, such as a browser window
  • min-aspect-ratio: The minimum ratio between the width and the height of the display area
  • min-color: The minimum number of bits per color component for the output device
  • min-color-index: The minimum number of colors the device can display
  • min-device-aspect-ratio: The minimum ratio between the width and the height of the device
  • min-device-width: The minimum width of the device, such as a computer screen
  • min-device-height: The minimum height of the device, such as a computer screen
  • min-height: The minimum height of the display area, such as a browser window
  • min-monochrome: The minimum number of bits per "color" on a monochrome (greyscale) device
  • min-resolution: The minimum resolution of the device, using dpi or dpcm
  • min-width: The minimum width of the display area, such as a browser window
  • monochrome: The number of bits per "color" on a monochrome (greyscale) device
  • orientation: The orientation of the viewport (landscape or portrait mode)
  • overflow-block: How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
  • overflow-inline: Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
  • resolution: The resolution of the output device, using dpi or dpcm
  • scan: The scanning process of the output device
  • update-frequency: How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
  • width: The viewport width

You can use it in html page or in css file.

@media only screen and (max-width: 500px) {
.mainmenu {
   width:100%;
}
}
Posted On: 27-Dec-2015 01:31
sam
sam
134 Points
62 Posts
         

Hi Rahul Maurya,

Thank...

I am working on responsive site. Is there fixed media query for all stadard devices available nowaday.

Posted On: 27-Dec-2015 01:47
Jak
Jak
Member
364 Points
152 Posts
         

Yes, Following are the media query for the standard sizes:

/*Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*Your Styles */
}
/*Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/*Your Styles */
}
/*Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/*Your Styles */
}
/*iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*Your Styles */
}
/*iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Your Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Your Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Your Styles */
}
@media
only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/*Your Styles */
}
/*Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/*Your Styles */
}
/*Large screens ----------- */
@media only screen and (min-width : 1824px) {
/*Your Styles */
}
/*iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/*Your Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/*Your Styles */
}
/*iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}
/*Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}

 

Posted On: 27-Dec-2015 02:18
 Log In to Chat