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

Question

我有一些关于 html 和 css 的问题。

情况是这样的。我正在构建一个移动网络，我的基线宽度为 240 像素。所以我所有元素的尺寸都是根据 240 屏幕尺寸设置的。但是当我在像 Samsung Galaxy note 这样的大手机上浏览网页时。所有的东西似乎都太小以至于用户无法点击它。

现在的问题是，是否可以对宽度和高度使用可变种类的 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;
    }
}