@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. LayoutInflater(一)

    相信接触Android久一点的朋友对于LayoutInflater一定不会陌生,都会知道它主要是用于加载布局的.而刚接触Android的朋友可能对LayoutInflater不怎么熟悉,因为加载布局的 ...

  2. 循环冗余检验算法CRC

    http://blog.csdn.net/liyuanbhu/article/details/7882789 首先要了解多项式乘法,除法 了解模2运算的含义,多项式除法后合并同类项时..系数%2处理 ...

  3. 定时备份mysql

    @echo offset filename=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%mysqldump -- ...

  4. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  5. https://www.nginx.com/blog/introduction-to-microservices/

    https://www.nginx.com/blog/introduction-to-microservices/

  6. Ue4全景图制作设想

    官方有个Scene Capture Cube与Cube Rander Target. 之后再想办法生成文件就好了吧

  7. An Unfair Game-[ACdream1035]

    Problem Description There are n people and n target, everyone should get one target, no two people g ...

  8. JS 用sort方法排序字符串

    JavaScript提供了一种更简便的方法用于比较两个字符串——localeCompare(),localeCompare()使用本地特定的顺序来比较两个字符串,语法如下:string.localeC ...

  9. topcoder SRM 623 DIV2 CatchTheBeatEasy

    比较简单的一题,纠结比较久的是把my_cmp和my_minus放在类中,利用sort函数会出现 no matching function for call to ""sort(st ...

  10. ubuntu 安装Firefox 29.0

    下载Firefox 29.0 % cd ~/Downloads % sudo cp firefox-29.0.tar.bz2 /opt % cd /opt % sudo tar -xvjf firef ...