使用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制作的20种loading动效
Jul 05 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
Html5新增了哪些功能
Apr 16 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的中问验证码
2006/11/25 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP递归算法的简单实例
2019/02/28 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
django输出html内容的实例
2018/05/27 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python numpy实现rolling滚动案例
2020/06/08 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
英国名牌男装店:Standout
2021/02/17 全球购物
10条PHP编程习惯
2014/05/26 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
关爱留守儿童标语
2014/06/18 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书