前端页面调试：固定元素宽高的方法

在前端页面开发中，固定元素的宽高能够帮助你更直观地观察和调试页面布局。本文将介绍三种常用的方法，帮助你轻松固定元素的宽高，方便测试和调整布局。

1. 使用 CSS 样式设置固定宽高

通过设置元素的 width 和 height 属性来固定它的宽高。

.element {
  width: 200px;
  height: 100px;
}

2. 使用 HTML 属性设置固定宽高

你可以在元素的 HTML 标签中添加 width 和 height 属性来固定它的宽高。

<div style='width: 200px; height: 100px;'></div>

3. 使用 JavaScript 动态设置固定宽高

可以使用 JavaScript 动态设置元素的宽高，比如在窗口大小变化时重新计算元素的宽高。

const element = document.querySelector('.element');
window.addEventListener('resize', () => {
  element.style.width = `${window.innerWidth}px`;
  element.style.height = `${window.innerHeight}px`;
});

无论使用哪种方法，都可以在前端页面开发时固定元素的宽高，便于调试和测试。