@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 { 
 
} 
} 
@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的一个事件，可以通过监听事件匹配屏幕横竖屏。

手机横屏竖屏css的更多相关文章

  1. CSS3判断手机横屏竖屏

    原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏, ...

  2. ipad 横屏 竖屏 CSS

    /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-devic ...

  3. javascript判断手机旋转横屏竖屏

    javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...

  4. HTML5中判断横屏竖屏

    在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...

  5. 【转】Android 模拟器横屏竖屏切换设置

    http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   ...

  6. js 横屏 竖屏 相关代码 与知识点

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  7. Android之横屏竖屏显示问题

    1.採用不同的布局文件 在res下创建目录layout-land 在该目录下写入的layout(xml文件)横屏的时候系统自己主动选择显示的layout 同理: 在res下创建目录layout-por ...

  8. Android横屏竖屏切换的问题

    Android横屏竖屏切换的问题 http://blog.sina.com.cn/s/blog_77c632410101790w.html

  9. vue手机端横屏竖屏切换

    1.建一个空白的vue文件,添加上如下代码 data() { this.$router.go(-1) return {} }   2.在需要横屏竖屏切换的页面中加入如下代码: beforeMount( ...

随机推荐

  1. java发展史与java的语言特性

    概述: Java 体系比较庞杂,功能繁多,这也导致很多人在自学 Java 的时候总是感觉无法建立 全面的知识体系, 无法从整体上把握Java 的原因. 在这里我们先简单了解一下Java 的版本. 具体 ...

  2. Released Mocked Streams for Apache Kafka

    Kafka Streams is a de­ploy­ment-ag­nos­tic stream pro­cess­ing li­brary writ­ten in Java. Even thoug ...

  3. static之用法

    本文转载于http://www.cnblogs.com/stoneJin/archive/2011/09/21/2183313.html 在C语言中,static的字面意思很容易把我们导入歧途,其实它 ...

  4. poj3642 01背包

    http://poj.org/problem?id=3624 #include<iostream> #include<cstdio> #include<algorithm ...

  5. CentOS安装PHP和mysql

    新生在不会编译的情况下: 1.安装PHP5 yum install php 根据提示输入Y直到安装完成 2.安装PHP组件,使 PHP5 支持 MySQL yum install php-mysql  ...

  6. ios开发学习笔记（这里一定有你想要的东西，全部免费）

    1,Search Bar 怎样去掉背景的颜色(storyboard里只能设置background颜色,可是发现clear Color无法使用). 其实在代码里还是可以设置的,那就是删除背景view [ ...

  7. http://blog.csdn.net/u010246789/article/details/52539576

    http://blog.csdn.net/u010246789/article/details/52539576

  8. js点击a链接弹出alert对话框

    代码 <html> <head> <meta charset="utf-8"> <meta name="generator&qu ...

  9. ural 1251. Cemetery Manager

    1251. Cemetery Manager Time limit: 1.0 secondMemory limit: 64 MB There is a tradition at the USU cha ...

  10. oracle增量备份

    在进行数据库维护的过程中经常会遇到数据库备份的问题.先介绍一种常用的数据备份操作系统执行计划+批处理命令:在win的系统中存在 任务计划程序 选项:新建任务选中你写好的程序,设定好时间,就可以按照设定 ...