页面特定区块引用第三方rem样式，如何设置不同rem基准？

Great question! The short answer is: you can't natively set a different rem base for a specific block, since rem units are always relative to the root <html> element's font-size. But don't worry—there are several workarounds to achieve the effect you want, where the .wordpress block's 1rem behaves like 10px instead of inheriting the global 14px.

Workaround 1: Override with CSS Variables (If Third-Party Supports It) #

If the third-party stylesheet uses CSS variables to define rem-based values, you can redefine the variable specifically for the .wordpress block. For example, if the third-party code uses a variable like --base-size: 1rem:

/* Global styles */
html {
  font-size: 14px;
}

/* Target the WordPress block */
.wordpress {
  --base-size: calc(10px / 14px * 1rem); /* Convert 1rem to 10px relative to global base */
}

This works only if the third-party styles reference the variable instead of hardcoding rem values directly.

Workaround 2: Convert rem to em (Manual or Automated Override) #

Since em units are relative to the parent element's font-size, you can reset the font-size for the .wordpress block and override any rem values with em:

html {
  font-size: 14px;
}

/* Set the base font-size for the block to 10px */
.wordpress {
  font-size: 10px;
}

/* Override rem-based styles to use em instead */
.wordpress * {
  font-size: 1em !important; /* Replace 1rem with 1em here */
  /* Add other properties (margin, padding, etc.) that use rem and convert to em */
}

If the third-party styles have lots of rem references, consider using a CSS preprocessor (like Sass) or PostCSS plugin to automate the conversion from rem to em for the .wordpress block.

Workaround 3: Use Transform Scale (Quick But Imperfect) #

For a quick fix without modifying styles, you can scale the .wordpress block visually. Note that this affects layout and interaction areas, so use it cautiously:

.wordpress {
  /* Scale down to match 10px base from 14px global */
  transform: scale(calc(10 / 14));
  transform-origin: top left; /* Anchor scaling to the top-left corner */
  /* Adjust container size to avoid layout shifts */
  width: calc(100% * 14 / 10);
  height: calc(100% * 14 / 10);
}

This makes the block look like it's using a 10px rem base, but the actual element dimensions will be larger than expected, which can break click targets or layout alignment.

Workaround 4: Dynamic Conversion with JavaScript #

If you can't modify the third-party stylesheet, use JavaScript to loop through elements in the .wordpress block and convert rem values to px based on your target 10px base:

const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); // Gets 14px
const targetBase = 10; // The desired rem base for the block

// Target all elements inside the WordPress block
const wpElements = document.querySelectorAll('.wordpress *');

wpElements.forEach(el => {
  const computedStyle = getComputedStyle(el);
  
  // Example: Convert font-size from rem to px
  const fontSize = computedStyle.fontSize;
  if (fontSize.includes('rem')) {
    const remValue = parseFloat(fontSize);
    const pxValue = remValue * targetBase;
    el.style.fontSize = `${pxValue}px`;
  }
  
  // Repeat for other properties using rem (margin, padding, width, etc.)
});

This gives you full control but requires handling every CSS property that uses rem units in the third-party styles.

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