横竖屏不同的情况来适配样式

1.内联样式

@media screen and (orientation:portrait) {

    //竖屏

}

@media screen and (orientation:landscape) {

    //横屏

}

2.外联样式

<!--竖屏-->

<linkrel="stylesheet"media="all and (orientation:portrait)"href="..."/>

<!--横屏-->

<linkrel="stylesheet"media="all and (orientation:landscape)"href="..."/>

3.js方法

JavaScript

1

2

3

4

5

6

7

8

9

10

var mql = window.matchMedia("(orientation: portrait)");

function onMatchMeidaChange(mql){

    if(mql.matches) {

        // 竖屏

    }else {

        // 横屏

    }

}

onMatchMeidaChange(mql);

mql.addListener(onMatchMeidaChange);

JavaScript

1

2

3

4

5

6

7

8

9

10

varmql=window.matchMedia("(orientation: portrait)");

functiononMatchMeidaChange(mql){

    if(mql.matches){

        // 竖屏

    }else{

        // 横屏

    }

}

onMatchMeidaChange(mql);

mql.addListener(onMatchMeidaChange);

0 0

• 横竖屏不同的情况来适配样式
• iOS 开发 - 让 UITabContorller 不同的tab 分别支持不同的横竖屏样式
• Dialog样式的Activity设置不同的情况
• 浅谈activity的生命周期及横竖屏情况
• android ActivityGroup横竖屏使用不同布局导致的问题
• Fragment 横竖屏切换时加载不同的布局
• android LayoutInflater 横竖屏不同布局的处理
• 为横竖屏切换配置不同的layout
• Android 横竖屏切换加载不同的布局
• "/0"不同的情况
• 加载不同的样式
• 不同的分页样式
• 【DeskClock】开机闹钟横竖屏显示不同
• iOS 不同系统横竖屏转动
• 控制横竖屏显示不同界面
• 用autolayout如何在横竖屏切换情况下改变控件的位置
• 横竖屏切换等各种情况下Activity生命周期的变化。
• Android 一个例子来解读Fragment实现横竖屏不同的布局
• Android进阶之路
• Cookie与Session的对比
• Qualcomm Android camera 架构简析及如何debug
• Qt学习笔记1：信号和槽
• C语言数据结构插入算法
• 横竖屏不同的情况来适配样式
• 二叉搜索树与双向链表（Java实现）
• 使用Flex 和 Red5开发简单视频直播功能[转]
• 分针网—IT教育： Javascript不同浏览器差异及兼容方法
• 微信小程序页面布局
• 支持火狐的文本超出隐藏以省略号显示
• netty应用
• Divisible Group Sums LightOJ
• C语言程序设计