使用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新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python格式化输出%s和%d
2018/05/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python银行系统实现源码
2019/10/25 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
公证委托书格式
2014/09/13 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
运动会100米加油稿
2015/07/21 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
小学英语教学随笔
2015/08/14 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python