Ipad上的响应元素

Question

我对网站上的4个元素的响应性有疑问我正在使用饼图元素在我的桌面互联网浏览器上完美缩放。但由于某些原因，元素在IPAD 2上重叠。我使用了这个CSS：

@media only screen 
and (min-device-width : 768px)  
and (max-device-width : 1024px)  {
.q_pie_chart_holder {
    display: inline-block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.3s ease 0s;
    width: 100%;
}
}

此外，标题图像也会在屏幕尺寸上被切断。

   .elephant-header {
background-image: url("http://www.elephantdesign.nl/wp-content/uploads/2015/05/header1.jpg");
background-repeat: no-repeat;
background-size:100%; 
margin:0 auto;
max-width:100%;
height: auto;

}

有没有人知道为什么？

Answer 1

看起来问题是那些饼图元素的画布元素的设置宽度和高度为174px。您可以查看下面的屏幕截图，看看它出现在哪里。

所以你有几个选择：

1. 更改画布元素的宽度和饼图的大小。我认为您正在使用此库 - http://rendro.github.io/easy-pie-chart/作为您的饼图。看起来作者在height元素上分配了内联width和<canvas>来相应地调整其大小。

2. 将列布局更改为2到2格式，即对vc_col-sm-6或更小的屏幕使用768px。

我没有注意到标题图片的问题 - 您是否可以添加截图？