侧边栏菜单有问题。在三星 Galaxy Note 2 等某些安卓设备上和 chrome 浏览器位置:菜单的固定和实际位置失败,菜单显示在我的网站上。这是一个 CSS 代码。我已经搜索了解决方案,并且只找到了我需要使用的答案
backface-visibility: hidden; and -webkit-transform:translateZ(0);
我做到了,但是问题依旧。我是制作移动兼容性网站的初学者,无法弄清楚导致问题的原因。希望得到你的帮助。
nav {
background-color:White;
padding-right: .25em;
position: fixed;
left: -25em;
top: 0;
padding-top: 3em;
box-sizing: border-box;
z-index: 300;
height: 100%;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform:translateZ(0);
backface-visibility: hidden;
}
nav.active
{
left: 0;
overflow:auto;
}
<script type="text/javascript">
//jquery for switching the class
$('#mobile-sidebar').click(function (event) {
$('nav').toggleClass('active');
});
</script>
附言抱歉我的英语不好。
最佳答案
可以使用@media规则,用于为不同的媒体类型/设备定义不同的样式规则。
@media screen and (min-width: 480px) {
nav {
background-color:White;
padding-right: .25em;
position: fixed;
left: -25em;
top: 0;
padding-top: 3em;
box-sizing: border-box;
z-index: 300;
height: 100%;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform:translateZ(0);
backface-visibility: hidden;
}
nav.active
{
left: 0;
overflow:auto;
}
}
检查 Samsung Galaxy Note 2 的最小宽度。尝试使用@media 规则实现移动兼容性并根据设备(宽度)更改 css。
关于android - 移动设备上侧边栏定位的 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42418464/