javascript - 前端开发对不同屏幕进行调试？

Question

背景：
开发使用笔记本显示设置：

显示器分辨率： 1920 * 1200;

缩放比例及布局： 150%

在此笔记本上开发项目：在此笔记本下开发大屏项目，在该笔记本上查看是有纵向滚动条的

开发技术栈：
vue3+echarts

宽度用了百分比
高度用了固定高度

调试：
用浏览器进行调试，模拟台式笔记本的分辨率，设置成1920*1080，此时呈现的结果是没有纵向滚动条的

问题：

1. 调试的19201080分辨率不是和开发笔记本的分辨率19201200分辨率接近嘛？为什么调试时滚动条消失了？
2. 作为一个大屏项目，开发时笔记本呈现的滚动条按道理也是体验不好的，在开发时如何设置高度，以保证在各个屏幕铺满屏幕，且没有滚动条？
3. 在利用笔记本开发时，如何对各种屏幕下进行调试，以保证在各个屏幕上展示良好（主要是PC端）？

Answer 1

问题1

虽然开发笔记本和调试时的分辨率接近，但缩放比例的不同会影响页面的实际显示效果。笔记本设置了150%的缩放比例，这意味着页面元素在显示时会被放大，从而导致页面高度超过视口高度，出现滚动条。而在调试时，模拟的1920x1080分辨率没有缩放比例的影响，因此没有滚动条。

问题2

为了在不同屏幕上铺满且没有滚动条，可以使用CSS的视口单位（如vh）来设置高度。例如：

.container {
  width: 100%;
  height: 100vh; /* 高度设置为视口高度的100% */
  overflow: hidden; /* 隐藏滚动条 */
}

问题3

为了确保在各种屏幕上展示良好，可以采用以下两种方法：

• 1.响应式设计：使用媒体查询（Media Queries）来针对不同的屏幕尺寸应用不同的CSS样式。例如：

@media (max-width: 768px) {
  /* 针对小屏幕的样式 */
}

@media (min-width: 769px) and (max-width: 1200px) {
  /* 针对中等屏幕的样式 */
}

@media (min-width: 1201px) {
  /* 针对大屏幕的样式 */
}

• 2.弹性布局：使用Flexbox或CSS Grid布局，使页面元素能够根据容器大小自动调整。例如：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.item {
  flex: 1;
}

最后结合浏览器开发者工具进行模拟设备调试

Answer 2

开发时，外容器写不同的固定宽高。比如

width: 1920px;
height: 1080px;
box-sizing: border-box;
padding: 0;
margin: 0;
border: none;
position:relative;