Question

我对html和css有一些疑问。

以下是这种情况。我正在构建一个移动网络，我的基线宽度为240像素。所以我的所有元素的尺寸都是基于240屏幕尺寸设置的。但是，当我在像三星Galaxy笔记的大手机中查看网页时。所有东西似乎都太小了，用户无法点击它。

现在的问题是，是否可以使用变量类型的css作为宽度和高度？可以说，我在240px宽度设备中使用的缩略图是50px，所以当我在480px宽度设备中查看我的缩略图时，缩略图将以100px显示，这意味着缩略图将根据屏幕的百分比增加其大小增加。

Answer 1

是的，显然你可以，你正在寻找的是Responsive Design，为了实现这一点，你需要@media个查询。

Demo （调整窗口大小以查看效果）

div {
    height: 200px;
    width: 200px;
    background-color: tomato;
}

@media all and (max-width: 400px) {
    div {
        height: 100px;
        width: 100px;
    }
}

Answer 2

使用宽度而不是固定宽度的百分比来使图像响应。

例如，使用100％而不是50px。它将自动填充容器（容器也响应）并自动调整浏览器大小。

Answer 3

是的，有可能，响应式设计以下列方式实现，

%
的 media queries

Answer 4

是的，您可以使用@media查询进行响应式设计

示例：

div{
width: 50px;
}

@media all and (min-width: 480px){

div{
width: 100px;
}

}

（或）你也可以在某些情况下使用百分比，例如width: 20%

html根据浏览器大小增加的百分比增加元素宽度

4 个答案: