CSS

Last Updated: 10/31/2022

Media Queries

  • With media queries, you can provide different styles for different devices/media types
  • Media queries can be used to style based on features like
    • screen size
    • orientation (landscape/portrait)
  • With media queries you can build webpages that look great on mobile phones, tablets, and desktop computers. This is called responsive website, because they respond to various screen sizes.

Responsive Website

To build a responsive website, you have two approaches

  • Mobile First:
    • Start with mobile first, and then adjust the layout for tablets and desktops.
    • Easier to build a simple web page for mobile and then if you have extra space, you can add in extra stuff.
    • Recommended.
  • Desktop First:
    • Build the desktop version first, and then adjust the layout for tablets and mobiles.
    • If you build a complex page for desktop, then you have to squeeze a lot of things so the page looks good on mobile,

Breakpoints

  • Breakpoint is the point at which our design breaks down.
  • Breakpoints depends on the design and what you are building.
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Media Query

  • A media query consists of a media type and can contain one or more expressions/media features
  • When media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
  • The and keyword combines a media feature with a media type or other media features.
  • If you use not or only, you must also specify a media type.

Syntax

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Samples

@media  screen and (min-width: 768px) {
}

@media  screen and (min-width: 768px) and (max-width: 900px) {
}

@media screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

/* When the width is 600px OR above 1100px */
@media screen and (min-width: 600px), (min-width: 1100px) {
  body {
    background-color: blue;
  }
}

You can also have different stylesheets for different media

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

Media Types

  • screen: used for computer screens, tablets, smart-phones etc.
  • speech: used for screenreaders that "reads" the page out loud
  • print: used for printers

Screen Media

Flex direction column in small devices and row in big devices

.container {
	display: flex;
	flex-direction: column;
}

@media  screen and (min-width: 768px) {
	.container {
		flex-direction: row;
	}
}
  • For printing you should use points for font
  • For padding and margins, you use centimeters or inches
@media print {
    body {
        font-size: 12pt;
    }
    .box {
        padding: 0.5cm;
    }
}

References

https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Previous
Next