Header Ads Widget

css media query

My codding spot January 15, 2022

An important feature of CSS is how to present document on different media types like paper, screen, printers  and so on. The media types is not supported by devices. CSS 3 introduce media query that works on device capability rather than types.

This post gives you little bit introduction about media query.


What is css media query?

CSS media query set the view of website according to different types of devices screen size. 
It is defined with @media rule, which specifies targeted media types separated by commas of set of rules.
CSS media query
CSS media query 


What is the use of css media query?

The media queries are used to modify website look according to different devices sizes.
CSS media queries are used for following.

  • Viewport size (height and width)

The viewport size is size of browser window only include web page content with elimination of scroll bar and menu bar.

  • Device size (height and width)

Size of various devices screens like desktop, laptop, tablet and mobile Phones.

  • Orientation

Tablet or mobile phone either in landscape or portrait mode.

  • Resolution

Screen resolution of devices in pixels.

How to write media query in CSS?

Syntax

@media not|only media types and (expression)
{
// CSS code.(selector {property: value;})
}

The media query is defined by @media rule and consist of logical operators, media types and media features written in form of expression.

The media types

Media types represents types of medium on which content displayed.

Following are the media types:-

1. screen 

Different devices screens like desktop, laptop, tablet and smartphone.

2. printers

for printers.

3. speech

for screen readers who read content loud.

4. all

for all types of devices.

Logical operators of media query 

The logical operators are used for creating complex media queries.

Logical operators used in media query are and, only and not.

Media features media query 

Media features specifies matching expression that we try to match with output device. 

Media features(expression)  are written in pair of "property: value" manner.

Following properties are used as media features.

height :- specifies height of viewport in numeric value.

max-height:- specifies maximum height of viewport.

width :- specifies width of viewport in numeric value.

max-width:- specifies maximum width of viewport.

aspect-ratio :- defines aspect-ratio of viewport.

color :- defines color value for output device in bits.

color-index :- defines numbers of color values the device can display.

monochrome :- defines numbers of bits per color for monochrome device.

orientation :- specifies orientation of viewport. (landscape or portrait)

scan :- specifies scanning process done on output device.

resolution :- specifies resolution of devices with dpi or dpcm.

Note:- There are lots of media features above are used as beginners level.

How media query works? 

media query checks for expression and type of medium on which web document is displayed. If both types and expression are true then css code  is executed and CSS styles applied to web document. If media types is unknown then result becomes false.

For example, For screen media you want your webpage fit on different screen sizes, set max-width or min-width of screen.

Examples of media query

Example 1:
Background color of body change to green when browser width is 800px or less.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Media Qurey</title>
<style>
@media screen and (max-width:800px)
{
body
{
background-color:#009900;
text-align:center;
}
}
</style>
</head>
<body>
<h1>background color is GREEN</h1>
<h3>when width is 800px or less</h3>
</body>
</html>

Output:-
Media query max-width(background color change)
Media query max-width(background color change)

Media query (max-width) output on laptop
Media query (max-width) output on laptop browser window width is 800px




Media query (max-width) output on mobile phone
Media query (max-width) output on mobile

Example 2:-

Background color of body becomes green when browser width is 800px or more.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Media Qurey</title>
<style>
@media screen and (min-width:800px)
{
body
{
background-color:#0000FF;
text-align:center;
}
}
</style>
</head>
<body>
<h1>background color is BLUE</h1>
<h3>when width is 800px or more</h3>
</body>
</html>

Output:-
Media query (min-width)
Media query (min-width) output on laptop - browser window width is 800px


Media query (min-width)
Media query (min-width) output on laptop - browser window is greater than 800px


Media query (min-width)
Media query (min-width) output on mobile

Example 3:

image size is reduced and border adds on images when browser window width is 600px or less and height is 800px or more.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>Media query images</title>
<style>
img
{
height:700px;
width:900px;
}
@media screen and (max-width:600px) and (max-height:800px)
{
img
{
width:500px;
height:500px;
border:5px groove #999999;
}
}
</style>
</head>

<body>
<img src="Desert.jpg" />
<img src="IMG_20170206_132153.jpg" />
<img src="Desert.jpg" />
<img src="IMG_20170206_132153.jpg" />
<img src="Desert.jpg" />
</body>
</html>

Output:-

Images size are big for full screen browser window


Images size are 500px for 600×800 px or more browser window size

Summary

In this post you got an introduction about what is media query and basic concepts of beginner level.
The screen media type is used more than others. You can also define more than one expressions in media query conjunction with logical operators.
 Media query consists of many more media features, which we will see later.


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments