Responsive Design Flashcards For Beginners

Viewport units are used as a relative unit of measurement based on the viewport size, with values like vw, vh, and more. In the example code, the container element is given a height of 50vh, which means it will take up 50% of the viewport height.

.container {
  height: 50vh;
}

Aspect ratio in CSS refers to the proportional relationship between an element's width and height. This can be useful in maintaining consistent proportions for images, videos, and other media across different screen sizes and devices. In the example code, the "image-wrapper" div is used to contain the image and maintain its aspect ratio. The width of the div is set to 100%, while the height is set to 0. The "padding-bottom" property is then set to 75%, which creates a responsive aspect ratio of 4:3 for the image.

.image-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Flexbox is a layout mode used to create flexible and responsive layouts, with values like display: flex, flex-wrap, flex-direction, justify-content, align-items, align-self, order, and more. In the example code, the container element is given a flex display with wrap enabled, while the item element is given a flex property of 1, which distributes available space evenly among all items.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
}

A grid system is used to create layouts using a grid of columns and rows, with values like display: grid, grid-template-columns, grid-gap, grid-row, grid-column, and more. In the example code, the container element is given a grid display with 12 columns and a 20-pixel gap, while the item element is placed within a span of 4 columns.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

.item {
  grid-column: span 4;
}

Breakpoints are used to define the specific screen sizes where the layout changes, with values like max-width: 768px, min-width: 992px, and more. In the example code, when the screen size is less than or equal to 768 pixels, the padding of the container element is set to 1rem.

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

EM units are used as a relative unit of measurement based on the font size of the parent element, with values like em, rem, and more. In the example code, the parent element is given a font size of 16 pixels, while the child element is given a font size of 1.5 EM, which is 1.5 times the font size of the parent element.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;
}

Responsive typography is used to define the dynamic sizing of typography based on screen size, with values like font-size, line-height, and more. In the example code, the font size of the h1 element is set to 3.5rem with a line-height of 1.2 and a margin-bottom of 1rem. When the screen size is less than or equal to 600 pixels, the font size is set to 2rem.

h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  h1 {
    font-size: 2rem;
  }
}

A design approach that starts with a basic, functional design and adds more advanced features for more capable devices

Responsive images are used to define the display of different images based on screen size and pixel density, with attributes like src, srcset, sizes, and more. In the example code, the src attribute points to the small version of the image, while the srcset attribute defines multiple versions of the image with different sizes. The sizes attribute then defines how the image should be displayed on screens of different sizes.

<img src="small.jpg" alt="Small Image" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw">

Media queries are used to define the style rules for different screen sizes, with values like max-width: 600px, min-width: 768px, and more. In the example code, the font size of the body element is set to 14 pixels when the screen size is less than or equal to 600 pixels.

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Mobile-first design is a design approach where the mobile layout is created first, with styles being added for larger screens as needed. In the example code, the base styles for all screen sizes are defined for the body element, with additional styles being added for screens larger than or equal to 768 pixels.

/* Base styles for all screen sizes */
body {
  font-family: sans-serif;
}

/* Styles for mobile screens */
@media (min-width: 768px) {
  /* Styles for larger screens */
}

REM units are used as a relative unit of measurement based on the root font size, with values like rem, em, and more. In the example code, the body element is given a font size of 16 pixels, while the element is given a font size of 1.5 REM, which is 1.5 times the root font size.

body {
  font-size: 16px;
}

.element {
  font-size: 1.5rem;
}

A design issue where elements shift or move around on the page as the layout adjusts to different screen sizes

Relative sizing in CSS refers to setting the size of an element relative to another element, rather than using a fixed size. There are several CSS units that allow for relative sizing, including percentages, ems, and rems. In the example code, the width of the child element is set to 50% of the width of its parent element. This means that regardless of the actual pixel size of the parent element, the child element will always be half as wide. The height of both elements is set to "auto", which means it will adjust to the content inside the element.

.parent {
  width: 100%;
  height: auto;
}

.child {
  width: 50%;
  height: auto;
}

The viewport meta tag is used to define the viewport of a web page on a mobile device, with values like width=device-width, initial-scale=1.0, and more. In the example code, the viewport is set to the width of the device and an initial scale of 1.0.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Reducing the file size of images to improve website performance on mobile devices.