Media queries in CSS

⌚ CSS3 Essentials

1. Optional media type + any number of media feature expression with logical operator.
2. Media queries are use only when site or applications modification is required.
3. Media queries types
1. Device's general type or specific character.
2. Parameters (such as screen resolution and browser viewport width).
3. Result is true/false.
4. Syntax: @media not|only mediatype and (expressions) { ... }
4. Media types
1. Describe the general category of a device
2. But device category not describe when use not or only logical operators.
3. all
1. For all devices. Default.
4. print
1. Print devices or preview mode.
5. screen
1. For device screen.
2. @media screen and (min-width: 40px) { p { background-color: lightgreen; }}
6. speech
1. Synthesize for speech.
5. Logical Operators
1. If use not or only then media type is required.
2. 'and' and comma(,) both are same but 'and' returns true only when all conditions are true.
6. Media features
1. Specific characteristic for output device or listener.
2. Media features only when it's presence and its case-sensitive.
3. Range value: min-* or max-*.
4. width
1. Specify the width length value of the viewport. Using width, max-width or min-width. 
2. @media (width: 360px) {  div {    color: red;  }}
5. height
1. Specify the height length value of the viewport. Using height, max-height or min-height. 
2. @media (min-height: 25rem) {  div {    background: yellow;  }}
6. aspect-ratio
1. Ratio value depend on width-to-height aspect ratio of the viewport.
2. @media (aspect-ratio: 1/1) {  div {    color: red;  }}
3. @media(min-aspect-ratio: 8/4) {  div {    background: yellow;  }}
7. orientation
1. Test the orientation of the view port.
2. @media screen and (orientation: landscape) {  body {   ...  }}
8. resolution
1. Test the pixel density of the output device. Accept range value (min/max).
2. @media(resolution: 155dpi) {  p {    width:12px;  }}
3. @media(min-resolution: 27dpi) {  p {    text-decoration: underline;  }}
4. @media(max-resolution: 30dpi) {  p {    background: #000;  }}
9. scan
1. Image displayed on television screen or other devices. Not like traditional scanning.
2. interlace
1. The device draws odd lines and even lines alternately. Some televisions use interlaced scanning. [Ref[1]]
3. progressive
1. 
   The device draws all lines in sequence. All computer screens use progressive scanning.[Ref[1]]
   
4. @media (scan: progressive) { h1 { font-family: serif;   } }
   
10. grid
1. Bitmap-based screens.
7. Ref:
1. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries