使用CSS3来匹配横屏竖屏的简单方法


Posted in HTML / CSS onAugust 04, 2015

写在同一个CSS中
 
CSS Code复制内容到剪贴板

  1. @media screen and (orientation: portrait) {   
  2.   /*竖屏 css*/  
  3. }    
  4. @media screen and (orientation: landscape) {   
  5.   /*横屏 css*/  
  6. }  

分开写在2个CSS中
竖屏
 

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  

横屏
 

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">  

应用的地方

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

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

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

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

HTML / CSS 相关文章推荐
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
CSS3中的content属性使用示例
Jul 20 #HTML / CSS
详解CSS3中border-image的使用
Jul 18 #HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 #HTML / CSS
You might like
初探PHP5
2006/10/09 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
python opencv之SURF算法示例
2018/02/24 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
Android笔试题总结
2014/11/29 面试题
群众路线教育实践活动方案
2014/02/02 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
父母对孩子说的话
2014/04/12 职场文书
初中物理教学反思
2016/02/19 职场文书