为什么我的移动浏览器显示的图片与iPad不同？

Question

所以我制作了一个响应式网站，其中有一部分包含以下代码：

/* Firefox */
width: -moz-calc(100% - 50px);
/* WebKit */
width: -webkit-calc(100% - 50px);
/* Opera */
width: -o-calc(100% - 50px);
/* Standard */
width: calc(100% - 50px);

它适用于平板电脑和台式机，但不适用于手机。我可以使用某种后备吗？

Answer 1

几乎总是box-sizing: border-box可以替换calc规则，例如用于布局的calc(100% - 50px)。

例如：

如果我有以下标记：

<div class="sideBar">sideBar</div>
<div class="content">content</div>

而不是这样做:(假设侧边栏宽50px）

.content {
  width: calc(100% - 50px);
}

这样做：

.content {
    padding-left: 50px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}