在移动设备上使用侧栏定位的CSS问题

我遇到了侧栏菜单的问题。在Samsung Galaxy Note 2和Chrome浏览器位置等某些Android设备上：菜单的固定位置和实际位置均失败，菜单显示在我的网站上。这是一个CSS代码。我寻找的解决方案，只有答案我得到，我需要使用在移动设备上使用侧栏定位的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>

P.S. Sry为我的英语不好。

来源

2017-02-23 Davit Mikuchadze

您可以使用@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; 
} 

}

检查最小宽度为三星Galaxy注2.试图为移动的相容性和变化的CSS按照设备（宽度）使用@media规则。

来源

2017-02-23 14:35:28 tushar

不确定是否导致问题。我已经使用了你所描述的@media规则，并且我使用了Chrome设备模拟器来测试移动版本的网站。当我选择银河注2的360x640大小，当我检查菜单时，它获得了正确的宽度。问题在于它不会识别位置：固定; left：-25em; –

在移动设备上使用侧栏定位的CSS问题

回答

相关问题