Scribd
Upload
23 views

Cssmediaquery

Media queries use CSS code to determine a device's screen size and orientation and adjust HTML pages to display properly. They allow different style rules for different screen sizes in the same style sheet. A media query checks characteristics like width, height, resolution and orientation and applies CSS rules if the conditions are met. For example, a query could format text larger for portrait screens less than 600px wide.

Uploaded by

Ogundele H. Omotayo Joseph
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Cssmediaquery

Media queries use CSS code to determine a device's screen size and orientation and adjust HTML pages to display properly. They allow different style rules for different screen sizes in the same style sheet. A media query checks characteristics like width, height, resolution and orientation and applies CSS rules if the conditions are met. For example, a query could format text larger for portrait screens less than 600px wide.

Uploaded by

Ogundele H. Omotayo Joseph
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

CIT230-06

BY: HEIDI SPACKMAN


WHAT IS A MEDIA QUERY?

A Media Query (Boolean code) written in CSS3 determines the screen display size
that needs to be used and adjusts the HTML pages to display correctly to fit on the
device.

The code written needs to address these characteristics:


1. Height and width of the device
2. Height and width of the browser
3. Screen resolution of the device
4. Orientation of the device (for mobile phones and tablets - portrait or landscape)
@media (… ) {
/*CSS rules go here*/
}

CSS style sheets can have media statements such as screen, print or media query
statements. To make web pages responsive to smaller devices, media queries allow
different style rules for different types of media in the same style sheet.
Example of what media query can do: When a user resizes the browser window up
or down to a certain width or height, different layouts can be used by the browser
from the media query. -or- A small tablet can view a web page because a media
query has been written to allow for the small display to view the page correctly.
HOW TO CODE A @MEDIA QUERY
A webmaster can code media queries on CSS style sheets for specific devices
and link the style sheets to the HTML web sheets or other CSS style sheets.

A CSS media query within a style sheet can look like this:
@media only screen and (max-device-width: 600px) and (orientation:
Landscape or Portrait){
/*CSS rules on how to display with this resolution on this device*/
}

The preceding example, tells the computer that if the current display has a width
of 600 pixels then run the code for that screen display.
@media screen and (max-device-width: 320 px) and (orientation:
Portrait), screen and (max-device-width: 320px ) and (orientation:
landscape), screen and (max-device-width: 480px) and (orientation:
Portrait), screen and (max-device-width: 480 ) and (orientation:
landscape) {
/*CSS rules on how to display with this resolution on this device*/
}

Notice how there are commas separating the different screen max
device widths and orientation, this is called a comma-separated list.
Comma-separated lists can behave like a Boolean and logical
operators, ‘and’ or ‘or’ are used to separate the individual queries. If
one is true it can use the CSS rules or if it is false then the CSS rule will
not be used.
There are different ways that media queries can be written.
• Write a CSS style sheet that lists all of the different types of device styles and
what styling code to run for each device. Then insert a link on each HTML page
referencing the media queries to be used if the default style is ‘false’.
• Write in each HTML page a statement testing for the size of the browser, and
then reference the size to the media queries on a CSS style sheet for that
particular size.

Here is an example of a code to write in a CSS style sheet for a small device:
@media screen and (max-device-width: 320px) and (orientation: portrait), screen and (max-device-
width:480px) and (orientation: landscape){
body {
background-color: yellow;
color: #f00;
}
h1 {
font-size: 200%
}
}
Size Description/ Mode

DEVICE SIZES 320 pixels Smart phone, iTouch - portrait

480 pixels Smart phone, iTouch - landscape

768 pixels Tablets, Kindle or Nook sizes - portrait


CHECK THE CURRENT DEVICE PIXEL SIZES, 1024 pixels iPad or Tablets - portrait
THESE CHANGE AS TECHNOLOGY IS
PROGRESSING! 1024 pixels Large iPad, Large Tablets, Laptops, Netbooks
Resolution

1300 pixels Widescreen displays, desktop computers, and


laptops
LINK MEDIA QUERY TO WEB PAGES

Once your CSS Media Query is written you must link your HTML web pages to that
query. Here is an example of a CSS Media Query link to put in the <head> of an
HTML document:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:


480px)" href="mobile-device.css" />

This link checks the device size and then sends the size to the referencing file
(mobile-device.css file) where all the specific media queries are coded for the type
of device being used; this will style the web page correctly for the current device.
GREAT PLACE TO LEARN WHAT MEDIA QUERY IS:
HTTP://WWW.HTMLGOODIES.COM/BEYOND/CSS/INTRODUCTION-TO-CSS-MEDIA-
QUERIES.HTML

GREAT PLACES TO LEARN HOW TO DO DIFFERENT ASPECTS


OF A MEDIA QUERY:
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/GUIDE/CSS/MEDIA_QUERIES
&
HTTP://WWW.W3SCHOOLS.COM/CSSREF/CSS3_PR_MEDIAQUERY.ASP

You might also like