Imooc-613 前端面试全家桶
搜索 K

Appearance

13 CSS 响应式 ​

  • rem 是什么？
  • 响应式布局的常见方案？

rem 是什么？ ​

  • px：像素，绝对长度单位，是相对于显示器屏幕分辨率而言的
  • em：相对于父元素的字体大小
  • rem：相对长度单位，相对于根元素（html）的字体大小的单位，常用于响应式布局
    • 1rem = 1html 字体大小，2rem = 2html 字体大小
    • 优点：可以根据根元素的字体大小，实现响应式布局；适用于移动端和 PC 端
    • 缺点：需要手动设置根元素的字体大小；需要计算根元素的字体大小
  • rpx：微信小程序的响应式单位，根据屏幕宽度进行等比例缩放
  • vh/vw：视口单位，相对于视口（viewport）的宽度和高度，视口单位可以用来实现响应式布局
查看代码
html
<div>
  <label for="fontSizeInput">根元素字体大小（px）:</label>
  <input type="number" id="fontSizeInput" value="16" min="10" max="20" step="1" />
  <button id="updateFontSize">更新字体大小</button>
</div>

<div class="container">
  <p class="small-text">这是一段小文本，使用 0.75rem。计算后的 font-size 为<span></span></p>
  <p class="medium-text">这是一段普通文本，使用 1rem。计算后的 font-size 为<span></span></p>
  <p class="large-text">这是一段大文本，使用 1.5rem。计算后的 font-size 为<span></span></p>
  <p class="x-large-text">这是一段超大文本，使用 2rem。计算后的 font-size 为<span></span></p>
</div>
css
html {
  font-size: 16px; /* 基准字体大小 */
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

.container {
  padding: 1rem;
  border: 1px solid #ccc;
  margin: 2rem 0;
}

.small-text {
  font-size: 0.75rem; /* 小文本 */
}

.medium-text {
  font-size: 1rem; /* 默认大小文本 */
}

.large-text {
  font-size: 1.5rem; /* 大文本 */
}

.x-large-text {
  font-size: 2rem; /* 超大文本 */
}
js
document.getElementById('updateFontSize').addEventListener('click', function () {
  const fontSizeInput = document.getElementById('fontSizeInput').value
  document.documentElement.style.fontSize = fontSizeInput + 'px'

  updateComputedValues()
})

function updateComputedValues() {
  const elements = document.querySelectorAll('.container p')
  elements.forEach((element) => {
    const elementFontSize = getComputedStyle(element).fontSize
    const span = element.querySelector('span')
    span.innerText = elementFontSize
  })
}

updateComputedValues()

响应式布局的常见方案？ ​

MDN

  • 媒体查询 media query: 根据不同的屏幕尺寸，设置不同的样式（例如设置根元素的字体大小，设置不同元素的宽度等）
  • rem 布局：根据根元素的字体大小，实现响应式布局
  • vw/vh 布局：根据视口的宽度和高度，实现响应式布局
查看代码
html
<div>
  <span>当前页面宽度：<span id="currentWidth"></span>px</span>
  <hr />
  <p>媒体查询</p>
  <ul>
    <li>小于等于 576px: 10px</li>
    <li>577px 到 768px: 16px</li>
    <li>769px 到 992px: 22px</li>
    <li>993px 到 1200px: 28px</li>
    <li>大于等于 1201px: 34px</li>
  </ul>
</div>

<div class="container" style="padding: 1rem; border: 1px solid #ccc; margin: 2rem 0;">
  <p style="font-size: 1rem;">这是一段普通文本，使用 1rem。计算后的 font-size 为<span></span></p>
</div>
css
html {
  font-size: 16px; /* 基准字体大小 */
}

/* 媒体查询*/
@media only screen and (max-width: 576px) {
  html {
    font-size: 10px;
  }
}

@media only screen and (min-width: 577px) and (max-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
  html {
    font-size: 22px;
  }
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
  html {
    font-size: 28px;
  }
}

@media only screen and (min-width: 1201px) {
  html {
    font-size: 34px;
  }
}
js
function updateDisplay() {
  // 更新当前页面宽度
  const currentWidth = document.documentElement.clientWidth
  document.getElementById('currentWidth').innerText = currentWidth

  // 更新计算后的字体大小
  document.querySelectorAll('.container p').forEach((element) => {
    const elementFontSize = getComputedStyle(element).fontSize
    const span = element.querySelector('span')
    span.innerText = elementFontSize
  })
}

// 当页面加载和调整大小时更新显示
window.addEventListener('load', updateDisplay)
window.addEventListener('resize', updateDisplay)