Home » CSS » Using CSS3 @media Rule to produce a responsive WordPress website design

Using CSS3 @media Rule to produce a responsive WordPress website design

Firstly, you can set style by selecting a particular style sheet for different screen resolutions or media types and devices.

<link rel='stylesheet' media='mediatype and|not|only (media feature)' href="stylesfile.css">

However,  the @media is a CSS rule that allows you to set different styles for diferent screen resolutions or media types/devices. CSS3 uses  media queries to check out

  • width and height of the device
  • width and height of the area of a web page visible to a viewer on a browser ( viewport)
  • landscape or portrait orientation
  • resolution

@media not|only mediatype and (media feature) {
a list of CSS rules….

Media types can be:

  • all     For use with all media type devices
  • print     For printer output
  • screen     PCs Laptops, tablets, smart-phones
  • speech     for browsers with speech output

A short list of some of the media features are:

aspect-ratio     of the viewport
color     supported  on the output device
color-index     The number of colors available
device-height  of the device’s screen
height      of the  viewport
width     of the viewport
max-height   of the display area, e.g a browser window
max-resolution  of the device, using dpi or dpcm
max-width     display area, e.g.  browser window
min-device-width  of the device
min-height   of the display area
orientation     landscape or portrait

An example of setting a larger font for a lower resolution mobile phone screen of 480 pixels or less. The better resolution screens can use 12pixels instead.

@media only screen and (max-width: 480px) {
@media screen and (min-width: 481px) {