使用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实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
sass 常用备忘案例详解
Sep 15 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 APC配置文件2套和参数详解
2014/06/11 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Python实现统计文本文件字数的方法
2017/05/05 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python迭代dict的key和value的方法
2018/07/06 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python中open函数的基本用法示例
2019/09/07 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
大四学年自我鉴定
2013/11/13 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
护理见习报告范文
2014/11/03 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery