css 如何根据显示器屏幕大小自动调整显示区域

Posted 2023-04-16

一般显示为4：3，但是客户要求根据显示器屏幕大小自动调整显示区域，比如16：9。是否应该在CSS上加点代码？还有其他方法吗？谢谢各位达人~

参考技术A 可采用百分比来设置大小

自动调整区域大小以适应屏幕

【中文标题】自动调整区域大小以适应屏幕

【英文标题】：Auto-resize area to fit screen

【发布时间】：2021-10-31 11:57:48

【问题描述】：

我想根据这张图创建一个视觉布局：

代码：

<>
          <Grid
              container
              direction="row"
              justifyContent="flex-start"
              alignItems="flex-start"
          >
              <Grid item>

                  <Grid className=classes1.color
                        container
                        direction="column"
                        justifyContent="flex-start"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m=2>
                              item link 1
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=2>
                              item link 2
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=2>
                              item link 3
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=2>
                              item link 4
                          </Box>
                      </Grid>

                  </Grid>

              </Grid>

              <Grid item>

                  <Grid className=classes2.color
                        container
                        direction="column"
                        justifyContent="space-around"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m=10>
                              item 11
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 11
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 13
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 14
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 15
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 16
                          </Box>
                      </Grid>

                  </Grid>

              </Grid>

              <Grid item>

                  <Grid className=classes3.color
                        container
                        direction="column"
                        justifyContent="space-around"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m=15>
                              item area 1
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=15>
                              item area 2
                          </Box>
                      </Grid>
                  </Grid>

              </Grid>

          </Grid>
      </>

完整代码：

https://stackblitz.com/edit/react-ts-lhrv91?file=Hello.tsx

我无法解决的问题是如何为第二列（第 1-6 项）添加垂直滚动条。 我还想自动调整项目“区域 1”和“项目区域 2”以适应水平区域的其余部分并添加垂直滚动条。

【参考方案1】：

对于在第二列中使用垂直滚动条，您可以将父 <Grid container> 分隔为三个 Grid，然后在中间 <Grid container> 中使用 style= height: "100%", overflow: "auto"

基于 material-ui documentation at "xl" 和 "xs" 道具，您可以使用 xs=12 in <Grid item xs=12> 来适应其余部分水平区域

检查这个看起来像你的代码的codesandbox

【讨论】：

我还有一个问题：是否有可能用鼠标调整左右边框的大小，用鼠标拖动mediumvioletred颜色的区域？有时我需要扩展它。

由于某种原因，我收到多个错误，例如 TS2769: No overload matches this call. 这条线 xs=xsGridLeft

我有一个小要求。你能用打字稿给我看同样的例子吗？

Material Design 的响应式 UI 基于 12 列网格布局，因此最小宽度 (xs=1) 应为屏幕的 8.33334%。所以我认为可调整大小的网格无法顺利实现，但可抓取的可调整大小组件的想法是相同的。它们都使用 addeventlistener 函数 onmousedown 、 onmouseup 和 onmousemove 并更改组件宽度。可能这个链接可以帮助你。 ***.com/questions/49469834/…

感谢您的回复。一个小小的请求。你能告诉我在 Typescript 中同样的解决方案吗？