使用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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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
2.PHP入门
2006/10/09 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
laravel5.6实现数值转换
2019/10/23 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
围观tangram js库
2010/12/28 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
python 求定积分和不定积分示例
2019/11/20 Python
python实现翻译word表格小程序
2020/02/27 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
印刷工程专业应届生求职信
2013/09/29 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
圆明园观后感
2015/06/03 职场文书