使用CSS3来匹配横屏竖屏的简单方法


Posted in HTML / CSS onAugust 04, 2015

写在同一个CSS中
 
CSS Code复制内容到剪贴板

  1. @media screen and (orientation: portrait) {   
  2.   /*竖屏 css*/  
  3. }    
  4. @media screen and (orientation: landscape) {   
  5.   /*横屏 css*/  
  6. }  

分开写在2个CSS中
竖屏
 

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  

横屏
 

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">  

应用的地方

(1)手机WEB页面元素内容一般都是通过百分比定义的,以便能够在不同分辨率设备下都能正常显示,虽然这样,但是移动设备的屏幕分辨率宽度和高度相差还是很大,同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大,这样就会失去页面的美观性,这样,如果用orientation匹配屏幕的翻转状态,就可以写不同的css加以控制页面样式。

(2)对于有背景图的移动WEB页面,可以根据orientation匹配屏幕屏幕状态,设置不同的background。

(3)稍微有技术的一点:某些有绝对定位元素的WEB页面,将某元素定位到页面底部,当屏幕是竖屏状态时,可能因为页面总长度小于屏幕高度(但是大于屏幕宽度),这时将绝对定位元素定位到底部是正确的,但是当屏幕翻转成为横屏时,此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度),绝对定位元素会覆盖在页面内容之上,导致页面出现问题,这时可用orientation匹配屏幕状态,调整css代码。

关于匹配屏幕横竖屏状态还可通过JS判断,js中onorientationchange是window的一个事件,可以通过监听事件匹配屏幕横竖屏。

HTML / CSS 相关文章推荐
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
CSS3中的content属性使用示例
Jul 20 #HTML / CSS
详解CSS3中border-image的使用
Jul 18 #HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 #HTML / CSS
You might like
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
javascript事件问题
2009/09/05 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python中关于字符串对象的一些基础知识
2015/04/08 Python
jupyter notebook清除输出方式
2020/04/10 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
俄语专业毕业生推荐信
2013/10/28 职场文书
升职自荐信
2013/11/28 职场文书
同事吵架检讨书
2014/02/05 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
出国签证在职证明范本
2014/11/24 职场文书
员工辞退通知书
2015/04/17 职场文书
让生命充满爱观后感
2015/06/08 职场文书
师范生见习自我总结
2015/06/23 职场文书
2016教师国培研修感言
2015/12/08 职场文书
学习党章心得体会2016
2016/01/15 职场文书