/* 设备竖屏时调用该段css代码 */
@media all and (orientation : portrait){
body{
  background-color:blue;
 }
}
/* 设备横屏时调用该段css代码 */
@media all and (orientation : landscape){
body {
  background-color:red;
 }
}

css3媒体查询判断移动设备横竖屏的更多相关文章

  1. 运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

    //iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...

  2. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

  3. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  4. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  5. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

  6. iPhone6的CSS3媒体查询

    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...

  7. CSS3媒体查询使用小结

    首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...

  8. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  9. CSS3媒体查询

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

随机推荐

  1. hdu1002大数相加

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...

  2. Android(java)学习笔记148:Eclipse中代码提示去掉@override,不然就报错!

    把项目下载下来后有@Override的注释的方法会报错,如果把@Override去掉就不报错了.经过查阅后发现:@override注释在jdk1.5环境下只能用于对继承的父类的方法的重写,但不能用于对 ...

  3. struts----通配符设置

    本次学习的内容是struts通配符配置: 具体内容为: 一.准备工作 1.新建Web工程 2.添加struts:右键点击工程名选择My Eclipse-->点击add struts..--> ...

  4. JVM工作原理和特点

    操作系统装入JVM,是通过jdk中的java.exe来完成,通过以下4个步骤: 1. 创建JVM装载环境和配置: JVM装入系统,JVM提供的方式是操作系统的动态链接文件.文件就是一个装入路径的问题, ...

  5. jquery处理textarea中的手动换行

    textarea的手动换行会产生换行标志,但这个标志存在却看不到,存入数据库中后读出来显示在页面上却不会换行,如何处理呢? 网上众说纷纭,经过测试用 textarea的内容.replace(/\n/g ...

  6. SqlServer 事务日志传输

    基本概念 可以使用日志传送将事务日志不间断地从一个数据库(主数据库)发送到另一个数据库(辅助数据库).不间断地备份主数据库中的事务日志,然后将它们复制并还原到辅助数据库,这将使辅助数据库与主数据库基本 ...

  7. HOOK函数(一)——进程内HOOK

    什么是HOOK呢?其实很简单,HOOK就是对Windows消息进行拦截检查处理的一个函数.在Windows的消息机制中,当用户产生消息时,应用程序通过调用GetMessage函数取出消息,然后把消息放 ...

  8. Android版本分布——2016年10月更新

    Code Name Version API Level Distribution frogy(冻酸奶) 2.2.x 8 0.1% gingerbread(姜饼) 2.3.3——2.3.7 10 2.0 ...

  9. ios NSAssert趣谈

    Apple 官网介绍 NSAssert 的定义如下: #define NSAssert(condition, desc, ...) \ do { \ __PRAGMA_PUSH_NO_EXTRA_AR ...

  10. MinGW-notepad++开发c/c++程序

    下载MinGW 点击下载 安装好后运行 最后点击左上角的 Installation,开始安装 1.编译: g++ -o a.exe a.cpp gcc -o hello.exe hello.c 2.运 ...