@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. sql 提取数字、字母、汉字

    --提取数字 IF OBJECT_ID('DBO.GET_NUMBER2') IS NOT NULL DROP FUNCTION DBO.GET_NUMBER2 GO )) ) AS BEGIN BE ...

  2. Web Tours自带示例网站无法打开的解决方案

    问题现象: LoadRunner自带的测试样品,旅行社机票预订系统HP Web Tours以下简称为Web Tours. 1.LoadRunner程序的Sample目录下无Web和Web Tours服 ...

  3. Portlet简述

    一.Portlet是什么? Portlet是基于java的web组件,由portlet容器管理,并由容器处理请求,生产动态内容.Portals使用portlets作为可插拔用户接口组件,提供信息系统的 ...

  4. AngularJS学习之SQL

    1.使用PHP从MySQL中读取数据: <div ng-app="myApp" ng-controller="customersCtrl" > &l ...

  5. Python profiling

    Profiling(性能调试)是我一直很感兴趣的一个话题,之前给大家介绍过Datadog这个工具,今天我们来看看Python语言中有哪些方法来做Profiling. Poorman's Profile ...

  6. 模拟 Codeforces Round #288 (Div. 2) A. Pasha and Pixels

    题目传送门 /* 模拟水题:给定n*m的空白方格,k次涂色,将(x,y)处的涂成黑色,判断第几次能形成2*2的黑色方格,若不能,输出0 很挫的判断四个方向是否OK */ #include <cs ...

  7. 如何查看项目svn路径

    1.选择项目根目录---->鼠标右键---->属性---->版本控制(Subversion) 如图:

  8. android 第三方 Im

    1.阿里百川 单聊.群聊.客服能力集成,仅需花费4小时,不收费,0成本接入,让App轻松拥有沟通能力,历经多次双十一考验,消息到达率100%,全年可用性高达99.99%,登录异常提醒,木马钓鱼网站监测 ...

  9. 【bzoj2049】[Sdoi2008]Cave 洞穴勘测 link-cut-tree

    2016-05-30  11:04:51 学习了link-cut-tree 二中神犇封禹的讲义感觉讲的超级清晰易懂啊(没有的可以q窝 算是模板吧 #include<bits/stdc++.h&g ...

  10. iOS应用内付费(IAP)开发步骤列表

    iOS应用内付费(IAP)开发步骤列表 前两天和服务端同事一起,完成了应用内付费(以下简称IAP, In app purchase)的开发工作.步骤繁多,在此把开发步骤列表整理如下.因为只是步骤列表, ...