我正在使用Wordpress创建一个网站。
我需要对ImageMap插件做出响应。唯一的解决方案是使其可以在移动设备上滚动。因为如果图像使用overflow-x:scroll;和@media screen and (min-width:360px) and (max-width: 480px)进行转让，它也可以在Dekstop上滚动。
我也尝试过：@media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow-x:scroll;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
}
.container {
position:relative;
width:100%;
overflow-x:scroll;
}
}
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.imp-wrap{
min-width:100%; min-height:100%; width:auto; height:auto;
}
.container{
position:relative;
width:100%;
padding:0;
margin:0;
}
.container .row {
margin:0;
}。想到这个代码可能存在问题，所以搜索并尝试了stackoverflow.com的每个答案都没有帮助。 My Site
为该插件制作了一张票，但我需要快速回答，客户正在等待。
如何在移动设备中实现滚动，而dekstop使用CSS进行响应？
{{1}}
答案 0 :(得分：1)
css工作自上而下，更进一步的内容将超过页面中更高的内容。所以你拥有的是
@media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
overflow-x:scroll;
}
#image-map-pro-3521{
overflow-x:hidden;
}
所以无论发生什么，溢出-x总是被隐藏，因为它没有被条件语句包围，而是在页面的下方。所以要修复它要么将@media的东西放在css的底部，要么围绕一般的东西放置一个条件语句。更好的选择是重新排列css，除非你期望浏览器不能处理@media标签。
旁注：你为什么关心最小宽度？在360px宽度下发生什么不同的剂量？如果没有，那么你不需要min width语句，这应该节省一点带宽，并帮助页面加载更快。