One area of CSS that I worth considering is the ability to write rules that will apply to particular types of media. We look at websites on a variety of devices. A website viewed on a desktop browser and a mobile can appear completely differently. This is increasingly important as web designers strive to create sites that are not only accessible but can re-adjust themselves to best suit the device and the viewport of the user. This is called responsive web design.
For responsive design to work on all devices, we need to add the following meta tag into our HRML page’s <head> section:
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
Once this is in place, we will then use CSS media queries. These allow you to create different CSS rules that enable your site to display well on whatever device the user chooses to access it from.
Media queries work like a selection (if) statement in software development. If the conditions are true, then use the CSS rules inside the media query.
The structure of a media query will declare what type of media it is being set for and what condition the web page is looking for.
The syntax for a media query is:
@media not | only mediatype and (expressions) {
…
}
Your media queries should be placed at the end of your CSS document to ensure that they can properly override the styles already set for the site.
Not
Only