手机横屏和竖屏使用不同CSS来展现

尚寂新
尚寂新
2018/05/27 14:34

今天早上弄三道的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
2018-05-27-demo.jpg

已有 3 条评论 (旧评论在前)
  1. 泽泽
    回复
    2018-07-06 Windows NT10

    哇,写文档站好厉害

  2. 欧文斯
    回复
    2018-07-30 Windows NT10

    学习了,做 iOS 适配时用上了

  3. 加快速度放假
    回复
    2019-06-22 Windows 7

    好好用

添加新评论 (Markdown Supported)
😉
@[吃瓜] @[大哭] @[斗鸡眼滑稽] @[尴尬] @[滑稽] @[惊哭] @[惊叹] @[镜像滑稽] @[开心] @[狂汗滑稽] @[卖萌] @[胖次滑稽] @[喷] @[受虐滑稽] @[痛饮] @[微笑滑稽] @[笑喷] @[笑眼] @[阴险] @[装酷滑稽]