CSS Layout & Responsive Design

       
字数统计: 1.2k字   |   阅读时长: 7min

CSS Layout & Responsive Design

Modern web design requires layouts that adapt to different screen sizes and devices. This guide covers the essential CSS layout techniques and approaches to responsive design.

Traditional Layout Methods

1. Normal Flow

The default layout mode where elements are displayed one after another:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box {
  /* Block elements occupy full width */
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.inline-element {
  /* Inline elements flow within text */
  display: inline;
  margin: 0 5px;
}

.inline-block {
  /* Combines features of both */
  display: inline-block;
  width: 100px;
  margin: 0 10px;
}

2. Floats

Originally designed for wrapping text around images, floats have been used for creating multi-column layouts:

1
2
3
4
5
6
7
8
9
10
11
12
.container::after {
  content: "";
  display: table;
  clear: both; /* Clearfix to contain floats */
}

.column {
  float: left;
  width: 33.33%;
  padding: 15px;
  box-sizing: border-box;
}

3. Positioning

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.static {
  /* Default positioning */
  position: static;
}

.relative {
  /* Positioned relative to its normal position */
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute {
  /* Positioned relative to the nearest positioned ancestor */
  position: absolute;
  top: 0;
  right: 0;
}

.fixed {
  /* Positioned relative to the viewport */
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.sticky {
  /* Acts like relative, becomes fixed when scrolled */
  position: sticky;
  top: 0;
}

Modern Layout Methods

1. Flexbox

Flexbox is designed for one-dimensional layouts - either rows or columns:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
  display: flex;
  flex-direction: row; /* or column */
  flex-wrap: wrap; /* or nowrap */
  justify-content: space-between; /* horizontal alignment */
  align-items: center; /* vertical alignment */
  gap: 20px; /* spacing between items */
}

.item {
  flex: 1; /* grow and shrink equally */
}

.important-item {
  flex: 2; /* takes twice as much space */
}

.fixed-item {
  flex: 0 0 200px; /* don't grow, don't shrink, stay at 200px */
}

Common flexbox properties:

For the container (parent):

  • display: flex
  • flex-direction: row | row-reverse | column | column-reverse
  • flex-wrap: nowrap | wrap | wrap-reverse
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  • align-items: stretch | flex-start | flex-end | center | baseline
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch
  • gap: [row-gap] [column-gap]

For the items (children):

  • flex: [grow] [shrink] [basis]
  • align-self: auto | flex-start | flex-end | center | baseline | stretch
  • order: <integer> (default is 0)

2. CSS Grid

Grid is designed for two-dimensional layouts - rows and columns simultaneously:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: 100px auto 100px; /* specific row heights */
  gap: 20px;
}

.header {
  grid-column: 1 / -1; /* spans all columns */
}

.sidebar {
  grid-row: 2 / 3; /* specific row position */
  grid-column: 1 / 2; /* specific column position */
}

.content {
  grid-row: 2 / 3;
  grid-column: 2 / -1; /* from column 2 to the end */
}

.footer {
  grid-column: 1 / -1;
}

More complex grid example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.advanced-grid {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
  grid-template-rows: [top] auto [content-top] 1fr [content-bottom] auto [bottom];
  grid-template-areas:
    "header header header"
    "sidebar content related"
    "footer footer footer";
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.related { grid-area: related; }
.footer { grid-area: footer; }

Responsive Design Principles

1. Viewport Meta Tag

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

2. Media Queries

Media queries allow applying different styles based on device characteristics:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Base styles for all screen sizes */
.container {
  padding: 15px;
}

/* Styles for medium screens and up */
@media screen and (min-width: 768px) {
  .container {
    padding: 30px;
  }
}

/* Styles for large screens */
@media screen and (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none;
  }
}

Common media query breakpoints:

  • Mobile: 320px - 480px
  • Tablets: 481px - 768px
  • Laptops: 769px - 1024px
  • Desktops: 1025px - 1200px
  • TV/Large screens: 1201px and above

3. Fluid Layouts

Rather than fixed pixel sizes, use percentage-based widths for flexible layouts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  width: 100%;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
    float: left;
  }
}

@media (min-width: 1024px) {
  .column {
    width: 33.33%;
  }
}

4. Responsive Units

Use relative units instead of fixed pixels:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html {
  font-size: 16px; /* Base font size */
}

.container {
  width: 100%;
  padding: 1rem; /* relative to root font size */
}

h1 {
  font-size: 2.5rem; /* 40px if base is 16px */
}

.sidebar {
  width: 30%; /* percentage of parent */
}

.full-height {
  height: 100vh; /* viewport height */
}

.half-width {
  width: 50vw; /* viewport width */
}

.flexible-padding {
  padding: calc(1rem + 2vw); /* combines fixed and relative units */
}

Common responsive units:

  • %: Relative to parent element
  • em: Relative to the font-size of the element
  • rem: Relative to the font-size of the root element
  • vh: 1% of viewport height
  • vw: 1% of viewport width
  • vmin: 1% of the smaller dimension (height or width)
  • vmax: 1% of the larger dimension (height or width)

5. Responsive Images

1
2
3
4
img {
  max-width: 100%;
  height: auto;
}

HTML picture element for art direction:

1
2
3
4
5
<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

6. Mobile-First Approach

Start with styles for mobile devices and progressively enhance for larger screens:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Base styles for mobile */
.navigation {
  display: flex;
  flex-direction: column;
}

.nav-item {
  margin-bottom: 10px;
}

/* Enhanced styles for tablets and up */
@media (min-width: 768px) {
  .navigation {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .nav-item {
    margin-bottom: 0;
    margin-right: 20px;
  }
}

CSS Layout Best Practices

  1. Choose the right layout technique for the job:

    • Flexbox for one-dimensional layouts (rows or columns)
    • Grid for two-dimensional layouts (rows and columns)
    • Positioning for specific placement needs

  2. Create a consistent grid system to maintain alignment and spacing

  3. Use a mobile-first approach to ensure good performance on all devices

  4. Test on real devices whenever possible, not just browser resizing

  5. Consider accessibility in your layout choices (e.g., logical tab order)

  6. Avoid mixing layout techniques unnecessarily which can lead to unexpected results

  7. Use CSS custom properties (variables) for consistent spacing and breakpoints:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:root {
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

.container {
  padding: var(--spacing-md);
}

@media (min-width: var(--breakpoint-md)) {
  .container {
    padding: var(--spacing-lg);
  }
}

Learning Resources

扫一扫，分享到微信

微信分享二维码