使用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和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
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 采集心得技巧
2009/05/15 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python的依赖管理的实现
2019/05/14 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
几款好用的python工具库(小结)
2020/10/20 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
创业计划书之农家乐
2019/10/09 职场文书
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技