使用css3匹配手机屏幕横竖状态


Posted in HTML / CSS onJanuary 27, 2014

@media是css3中新定义的,功能非常强大,顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效。

1.头部声明

复制代码
代码如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">

加到

复制代码
代码如下:

<head></head>

2. media匹配屏幕是横屏还是竖屏

复制代码
代码如下:

@media all and (orientation : landscape) { </p> <p>/*

这是匹配横屏的状态,横屏时的css代码

*/
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){ </p> <p>/*

这是匹配竖屏的状态,竖屏时的css代码

*/
body {
background-color: #00ff00;
}
}

3. 应用的地方

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

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

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

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

HTML / CSS 相关文章推荐
css3 border-image使用说明
Jun 23 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
css3教程之倾斜页面
Jan 27 #HTML / CSS
使用css3制作动感导航条示例
Jan 26 #HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 #HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 #HTML / CSS
css图标制作教程制作云图标
Jan 19 #HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 #HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 #HTML / CSS
You might like
php学习 字符串课件
2008/06/15 PHP
PHP编程函数安全篇
2013/01/08 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python Socket编程入门教程
2014/07/11 Python
django中模板的html自动转意方法
2018/05/27 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python批量下载抖音视频
2019/06/17 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
职工代表大会主持词
2014/04/01 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
婚前财产协议书范本
2014/10/19 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
python+opencv实现目标跟踪过程
2022/06/21 Python