Skip to main content

Responsive Websites Using Queries


Introduction:
This page will be covering responsive designs using media queries.

What Are Responsive Websites?
Responsive websites are ones which adjust their elements to fit correctly within the screen of the device being used to view the page on. Instead of having to create different versions of a page for mobiles, tablets and computers, you can use simple media queries to easily adjust one page to display nicely on screens of all sizes.

Structure:
@media only screen and {screen sizes} {
// Styling goes in here.
}

Example:

  1. @media only screen and (max-width: 600px){
  2. // Styling goes in here.
  3. }

Possible Media Queries:
As well as using the screen property (which we are going to be using to get the responsive website) there are also other media queries that can be used within CSS...
all - Used for all media type devices.
aural - Used for speech and sound synthesizers.
braille - Used for braille tactile feedback devices.
embossed - Used for paged braille printers.
handheld - Used for small or handheld devices.
print - Used for printers.
projection - Used for projected presentations, like slides.
screen - Used for computer screens.
tty - Used for media using a fixed-pitch character grid, like teletypes and terminals.
tv - Used for television-type devices.

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. .myDiv {
  5. color: blue;
  6. width: 300px;
  7. height: 100px;
  8. // Blue text and 300px width for a screen bigger than 600 pixels.
  9. }
  10. @media only screen and (max-width: 600px){
  11. .myDiv {
  12. color: black;
  13. width: 100%;
  14. height: 100px;
  15. // Black text and full width for a mobile.
  16. }
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class='myDiv'>This is text!</div>
  22. </body>
  23. </html>

By putting our responsive queries at the bottom of the page, we ensure that any properties we have set prior to the queries are overwritten.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.