/* 设备竖屏时调用该段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. 导演类(CCDirector)

  2. Java基础知识强化之集合框架笔记70:模拟斗地主洗牌和发牌(ArrayList)

    1. 模拟斗地主洗牌和发牌 分析:     A:创建一个牌盒     B:装牌     C:洗牌     D:发牌     E:看牌 2. 代码实现: package cn.itcast_03; im ...

  3. 面向对象(POP)和面向过程(OOP)

    我对面向对象和面向过程的理解 面向过程:(procedure oriented programming 即:POP) 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时 ...

  4. oledb方式读取excel文件

    进入博客园后台发现12年11月份写的草稿没发,时隔1年,把它拉出来晒晒太阳. 前言 第一次做Excel文件导入,采用了oledb,不足之处,还请各位大牛指出,谨以此文对导入Excel做个总结. 一般步 ...

  5. PostgreSQL 修改列报错:cannot be cast automatically to type integer

    如果你直接使用可视化工具修改一个varchar字段为int类型的时候,可能会报错, 这里就需要自己去写一个语句去修改了 调整执行语句:ALTER TABLE table_name ALTER COLU ...

  6. Java联网技术之一TCP

    最近突然对java网络编程编程这一块非常感兴趣,于是找了很多资料,一点点的尝试,下面是自己的一点小见解,不喜勿喷,欢迎指正. 首先说说客户端和服务器端吧, 如果是网页的话,客户端通过网页的链接对服务器 ...

  7. Dev ComboxTree的实现

    一个项目中刚好用到,自己做下笔记备份 顺便和大家共享下 需要用到ASPxDropDownEdit ASPxTreeView 这两个控件 ASPxDropDownEdit对应的dll为:DevExpre ...

  8. 面向服务的体系结构(service-oriented architecture,SOA)

    SOA的概念是Gartner 在1996年提出来的,并于2002年12月进一步提出SOA是“现代应用开发领域最重要的课题”.   一.SOA的定义 SOA分为广义的SOA和狭义的SOA,广义的SOA是 ...

  9. 使用PDO连接多种数据库

    在PHP 5之前,想要连接MySQL数据库就需要使用mysql或mysqli等一系列函数来操作数据库.例如,我们使用mysql系列数据库函数进行查询操作,对应的示例代码如下: <?php //创 ...

  10. jdk在windows中的配置

    1.下载jdk(java developer kit),其内部包含jre(java runtime environment): 安装解压缩到一盘内,如:G:\Program Files\Java: 2 ...