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

【问题标题】：Page width(resizing for all device)页面宽度（调整所有设备的大小）
【发布时间】：2016-11-27 01:46:01
【问题描述】：

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; 或 margin-left:150px;）

【问题讨论】：

添加一些代码...
我不是在搜索代码问题，它可以正常工作。你需要知道的只是问题。
这可能是因为一些代码问题，如果你没有发布一些代码，答案将基于意见
检查css media queries，以及它们的排序。这是我们能给你的唯一答案。
我在网络上非常基础，但您询问页面的整个代码，这没有帮助。如您所见，我要求将规则应用于@media 或其他人的CSS，问题在标记内容中开始和结束，或者至少在 body 的 CSS 属性中，所以我不会更新 jsfiddle那

标签： html css margin pixels

【解决方案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/ 有了这个你就能明白了

【讨论】：