/* 设备竖屏时调用该段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. java_method_删除事务回滚

    public String[] deleteEPGroup(String groupID, String groupName) { String[] operRes=new String[3]; if ...

  2. jBPM5 vs Actitivi

    http://www.blogways.net/blog/2013/07/16/activiti-jbpm-compare.html jBPM是目前市场上主流开源工作引擎之一,在创建者Tom Baey ...

  3. primefaces 带参数的组件

    分析了一下primefaces extension showcase的源码,总结一下组件传参的方式. 下面定义了一个组件,名为fourTabsDecoratorCustom.xhtml 1: < ...

  4. Virtual Studio C++ Version Macro - _MSC_VER

    MSVC++ (Visual Studio ) MSVC++ (Visual Studio ) MSVC++ (Visual Studio ) MSVC++ (Visual Studio ) MSVC ...

  5. 四、使用Maven和使用Eclipse构建javaWeb项目

    环境前边已经搭建过了,我们就再弄了. 1.使用Maven构建javaWeb项目 (1).键入以下命令: $ mvn archetype:generate -DgroupId=com.holytax.w ...

  6. oracle 高版本导出低版本数据库并且导入到低版本数据的方法

    第一步:sqlplus system/egis@orcl as sysdba;  进入sqlplus (输入管理员用户名/密码@数据库密码) 第二步: create directory dumpdir ...

  7. iOS-开发日志-UIPageControl

    UIPageControl 1.  numberOfPages // 设置有多少页 默认为0 // 2) 设置页数 [pageControl setNumberOfPages:kImageCount] ...

  8. C#下如何用NPlot绘制期货股票K线图(3):设计要显示的股票价格图表窗口并定义相应类的成员及函数

    [内容简介] 上一篇介绍了要显示K线图所需要的数据结构,及要动态显示K线图,需要动态读取数据文件必需的几个功能函数.本篇介绍要显示蜡烛图所用到的窗口界面设计及对应类定义.下面分述如下: [窗口界面] ...

  9. C语言——N个人围成一圈报数淘汰问题

    <一>问题描述: 有17个人围成一圈(编号为0-16),从第 0号的人开始从 1报数, 凡报到 3的倍数的人离开圈子,然后再数下去,直到最后只剩下一个人为止. 问此人原来的位置是多少号? ...

  10. Cogs 1844. [JSOI2008]最大数maxnumber

    [JSOI2008]最大数maxnumber ★★ 输入文件:bzoj_1012.in 输出文件:bzoj_1012.out 简单对比 时间限制:3 s 内存限制:162 MB [题目描述] 现在请求 ...