in 技巧分享 (764℃)

今天早上弄三道的Wiki,结果发现手机横屏之后悬浮目录树就被挡住了 于是百度之,搜到了如下CSS(来源于SegmentFault)

@media screen and (orientation:portrait) {
    /*  css[竖向定义样式]  */
}
@media screen and (orientation:landscape) {
    /*   css[横向定义样式]  */
}

这样定义完之后,电脑的横屏也被判定成横屏了。想判定手机横屏的话,再套一层屏幕宽度的判定即可(宽度判定标准来自于BootStrap3.0)

@media screen and (orientation:portrait) {
    /*  css[竖向定义样式]  */
}
@media screen and (orientation:landscape) {
    /*   css[横向定义样式]  */
    @media (max-width: 768px) {
        /*手机横屏样式*/
    }
}

效果如下所示 当然这种方法也可以用在其他地方上
2018-05-27-demo.jpg

 |   | 

相关标签:#css

许可协议: 署名-相同方式共享 4.0 国际 转载请保留原文链接及作者