css怎样设置页面全屏和缩放 页面内元素排版不会乱

设置页面全屏：

1. 使用CSS的height和width属性将body元素设置为100%。

body {
  height: 100%;
  width: 100%;
}

2. 使用CSS的position属性将body元素定位为absolute。

body {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

3. 使用JavaScript的全屏API将页面全屏。

function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

<button onclick="toggleFullScreen()">全屏</button>

设置页面缩放：

1. 使用CSS的zoom属性将body元素设置为缩放比例。

body {
  zoom: 80%;
}

2. 使用JavaScript的transform属性将body元素缩放。

function zoomIn() {
  document.body.style.transform = "scale(1.5)";
}

function zoomOut() {
  document.body.style.transform = "scale(0.5)";
}

<button onclick="zoomIn()">放大</button>
<button onclick="zoomOut()">缩小</button>

页面内元素排版不乱：

1. 使用CSS的百分比布局，将元素的宽度和高度设置为百分比。

.container {
  width: 80%;
  height: 80%;
}

2. 使用CSS的flex布局，将元素按比例分配空间。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. 使用CSS的media query，根据屏幕大小自适应布局。

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}