Responsive Web Design: Media Query in Urdu Hindi Part 2
ijaz
August 24, 2016
0 Comments
RWD Responsive Web Design Tutorials
What is media query?
Media query is a method or a procedure used in CSS to define rules for different types of medias. The @media rule defines different style rules for different media types such as TV, Laptop, tablet , mobile etc.
Media queries are used to check many things, such as: resolution of the screen,width and height of the viewport (the portion of a webpage on the screen of different types of medias ),dimension of the device ( the width and height of the device ) and the orientation according to the devises such ad TVs , Desktops, tablets or phones in landscape layout or portrait layout
Defferent Media Types
| Value of media type | Description of devices |
| All | The value of All is used for all media type of devices |
| The Print value of media is used for only printers | |
| Screen | The Screen vaule of media is sed for screens of computers, tablets, smart phones etc. |
| Speech | when the value of media type is Speech then it is used for screenreaders |
The Syntax for Media Query
First of all , I want to define the word syntax . Syntax is the structure for the implementation of media query. A media query starts @media and consists of a mediatype and contain one or more expressions. It results only true or false. The media query encapsulates the block of CSS.The Block contains one or more CSS declarations. The block of CSS is executed in case of True option.
@media not|only mediatype and (expressions) {
Block of CSS code.
//declaration(s);
}
The True of False Result of Media Query
The result of the query is true if the specified media type matches the type of device in all expressions
in the media query are true. When a media query is true, the related Block of CSS is applied.
Orientation: Portrait / Landscape
Media queries change layout of a page depending on the orientation of the browser.
In landscape orientation the width of the browser is larger then the height.
Example orientation
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p> Landscape: the with is larger than the height. The background-color is lightblue for landscape ,
otherwise it is lightgreen.</p>
</body>
</html>
view tutorial
Add a Comment