HTML/CSS 响应式笔记本电脑和台式机

Question

我有一个学校元素。我想让所有页面都响应笔记本电脑和台式机。

我知道响应式最好用 % 来确定宽度和高度。就我而言，出于某些原因，我改用像素。

大部分页面都有表格，表格的高度和宽度各不相同。我只会为台式机制作 css，而当前代码(即表格的宽度和高度)适用于笔记本电脑。

我想为桌面做的是将表格的高度和宽度都增加 100 像素。例如对于笔记本电脑，页面 A 的高度和宽度均为 250 像素。如果我使用桌面，高度和宽度将相加 350px。

我该怎么做？

Answer 1

我建议查看@media 查询(https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)，快速了解您只需指定@media，然后是条件，然后是正常的css，如下所示

@media (minWidth: 300px){
        #pageA {
          height: 300px;
          width: 300px;
        }
}