页面宽度（调整所有设备的大小）

Question

我遇到了width和margin的CSS问题。我正在为所有设备（PC，智能手机和平板电脑）制作网页，使用HTML <meta name="viewport" content="width=device-width, initial-scale=0" >和Px（非自动或％）作为CSS的单位。

到目前为止，在调整窗口大小（浏览器PC）期间，元素仍处于其位置（工作页面），但在移动设备（智能手机和平板电脑）上，它看起来有不同的结果：

任何评论或解决方案都可能有所帮助，谢谢。

更新代码：页面的构建方式与此示例类似https://jsfiddle.net/1wfr3vpq/所有类属性设置为“auto”，最初位于px中（例如：width:1024px;或{{1} }）

Answer 1

使用媒体查询，您可以执行此操作。 例如，您仅使用min-width

为桌面计算机执行一些CSS

@media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
    body {
        background-color: yellow;
    }
}

另外，请看这个很棒的链接。 https://css-tricks.com/css-media-queries/ 有了这个你就可以得到这个想法