使用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 相关文章推荐
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 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加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
JavaScript Split()方法
2015/12/18 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
python中的lambda表达式用法详解
2016/06/22 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python实现维吉尼亚加密法
2019/03/20 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
初中班主任经验交流材料
2014/05/16 职场文书
园林系毕业生求职信
2014/06/23 职场文书
故宫导游词
2015/01/31 职场文书
大学团日活动总结书
2015/05/11 职场文书
校运会广播稿
2015/08/19 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python