在移动设备上查看完整分辨率
View full resolution on mobile device
我去过多个网站，其中网站缩小以保持分辨率，因此停止在移动页面上重叠。
我不确定我是否正确解释了我的问题。由于我是新成员，我将在差异中添加 links。
我尝试了一些 css3 媒体查询和一些我在网上找到的元标记，但目前没有任何效果。
这是我网站的 link：
http://conorpendlebury.com/
正如您从下图中看到的那样，导航栏与导航栏重叠，将内容推得太远，导致外观被压扁。
http://conorpendlebury.com/Images/Screenshot.png
要构建 offcanvas 导航，请将页面设置为 translateX 导航的大小。所以容器保持宽度。
这里有一个example.
无需 JavaScript 即可编码。
您是否想让 #Sidebar 在激活时与 #MainContent 和 #Footer 重叠，同时 #Bio 不会挤压？
如果是这样，请将 #MainContent 和 #Footer 设为 position: relative 和 z-index: -1，并删除使 [=18=] 等于 document.getElementById('Sidebar').style.width 的所有内容] 激活时。
如果您打算将其压扁，则需要一个函数来重新计算并将 css 重新应用到 #MainContent 和 #Footer.
我去过多个网站，其中网站缩小以保持分辨率，因此停止在移动页面上重叠。
我不确定我是否正确解释了我的问题。由于我是新成员，我将在差异中添加 links。
我尝试了一些 css3 媒体查询和一些我在网上找到的元标记，但目前没有任何效果。
这是我网站的 link： http://conorpendlebury.com/
正如您从下图中看到的那样，导航栏与导航栏重叠，将内容推得太远，导致外观被压扁。 http://conorpendlebury.com/Images/Screenshot.png
要构建 offcanvas 导航，请将页面设置为 translateX 导航的大小。所以容器保持宽度。 这里有一个example.
无需 JavaScript 即可编码。
您是否想让 #Sidebar 在激活时与 #MainContent 和 #Footer 重叠，同时 #Bio 不会挤压？
如果是这样，请将 #MainContent 和 #Footer 设为 position: relative 和 z-index: -1，并删除使 [=18=] 等于 document.getElementById('Sidebar').style.width 的所有内容] 激活时。
如果您打算将其压扁，则需要一个函数来重新计算并将 css 重新应用到 #MainContent 和 #Footer.