如何用CSS/SCSS实现侧边栏随窗口宽度（620-938px）线性缩放？

Absolutely! You don’t need JavaScript for this—CSS (with a little math) can handle the linear scaling perfectly. Let’s break down the approach and implementation:

Core Concept #

We’ll use CSS calc() combined with viewport units (vw) to create a linear formula that adjusts the sidebar width based on the window size. The key is calculating the right proportional value so the sidebar smoothly transitions between 200px and 240px as the viewport goes from 620px to 938px.

Step 1: Calculate the Math First #

Let’s define our variables to make the math clear:

• Minimum viewport width: 620px (sidebar starts at 200px)
• Maximum viewport width: 938px (sidebar maxes at 240px)
• Sidebar width range: 240px - 200px = 40px
• Viewport width range: 938px - 620px = 318px

The linear formula for the sidebar width is:

Sidebar Width = Minimum Width + (Width Range * (Current Viewport Width - Minimum Viewport Width) / Viewport Range)

Translating this to CSS syntax, we use 100vw for the current viewport width.

Step 2: CSS Implementation #

We’ll wrap this in media queries to restrict the scaling to the 620px–938px range, and set fixed widths outside of that:

.sidebar {
  /* Default for viewports smaller than 620px */
  width: 200px;
}

/* Apply scaling when viewport is between 620px and 938px */
@media (min-width: 620px) and (max-width: 938px) {
  .sidebar {
    width: calc(200px + ((40px * (100vw - 620px)) / 318));
  }
}

/* Fixed width for viewports larger than 938px */
@media (min-width: 938px) {
  .sidebar {
    width: 240px;
  }
}

Step 3: SCSS Version (Cleaner & Maintainable) #

If you’re using SCSS, you can define variables to make the code easier to update later. This avoids hardcoding numbers and makes adjustments a breeze:

$min-viewport: 620px;
$max-viewport: 938px;
$min-sidebar-width: 200px;
$max-sidebar-width: 240px;

// Calculate ranges once
$viewport-range: $max-viewport - $min-viewport;
$sidebar-range: $max-sidebar-width - $min-sidebar-width;

.sidebar {
  width: $min-sidebar-width;

  @media (min-width: $min-viewport) and (max-width: $max-viewport) {
    width: calc(#{$min-sidebar-width} + ((#{$sidebar-range} * (100vw - #{$min-viewport})) / #{$viewport-range}));
  }

  @media (min-width: $max-viewport) {
    width: $max-sidebar-width;
  }
}

How It Works #

• For viewports smaller than 620px, the sidebar stays fixed at 200px.
• Between 620px and 938px, calc() dynamically calculates the width: it takes the base 200px, then adds a proportion of the 40px width range based on how much the viewport has grown beyond 620px.
• For viewports larger than 938px, the sidebar locks at 240px.

This approach is lightweight, performant, and avoids any JavaScript overhead.

内容的提问来源于stack exchange，提问作者samlandfried