/* 设备竖屏时调用该段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. Sample Ant Build File - WAR--reference

    I am using the Spring SimpleFormController example to illustrate the build process. The figure below ...

  2. BeagleBone Black Linux驱动程序开发入门(1): LED驱动程序

    这篇文章展示如何在BBB平台上编写LED驱动程序,本文的程序是根据国嵌S3C2440的LED驱动的例子并结合内核中OMAP系列的gpio操作来改的.本文中的程序包括驱动程序模块和用户空间程序.废话不多 ...

  3. android zxing自定义界面,点击按钮开关闪光灯

    折腾了一天,今天基本把自定义扫描二维码界面实现了,主要碰到的问题是文本过长,要居中并换行,绘制图片,点击切换不同图片,打开或关闭闪关灯,结果发现在一些机型上出现空指针异常,又牵扯到硬件加速问题...参 ...

  4. 通过文件读写方式实现Matlab和Modelsim的联合仿真

    虽然Modelsim的功能非常强大,仿真的波形可以以多种形式进行显示,但是当涉及到数字信号处理的算法的仿真验证的时候,则显得有点不足.而进行数字信号处理是Matlab的强项,不但有大量的关于数字信号处 ...

  5. web开发学习之旅---html第一天

    一.认识浏览器 浏览器就是接收浏览着的操作,然后帮浏览者去web服务器请求网页内容(html格式返回),然后展现成人眼能够看得懂的可视化页面的软件. IE==浏览器?IE是浏览器的一种,还有Firef ...

  6. SQL Server游标+延迟执行简介

    在项目测试中,我们可能会使用批量生成数据来测试程序的性能. 这里讲一个我遇到的问题,由于我们批量生成数据时基本上是瞬间完成,所以GETDATE()函数获得的时间基本上也是一样的,而我们又要求生成每条数 ...

  7. aptitude

    aptitude比apt-get 要好用.是 Debian 及其衍生系统中功能极其强大的包管理工具.与 apt-get 不同的是,aptitude在处理依赖问题上更佳一些.举例来说,aptitude在 ...

  8. input设置disabled,经过strus2提交到后台,后台取不到值

    页面中有多个name相同的input与后台action中一个属性对应,一直在好奇为什么会可以提交到后台呐,但是有时还报这个属性找不到对应的方法(多个name相同好像匹配的是数组,所以找不到), 但是我 ...

  9. 九度OJ 1201 二叉排序树

    题目地址:http://ac.jobdu.com/problem.php?pid=1201 题目描述: 输入一系列整数,建立二叉排序数,并进行前序,中序,后序遍历. 输入: 输入第一行包括一个整数n( ...

  10. processon完全装逼指南

    一.引言 作为一名IT从业者,不仅要有扎实的知识储备,出色的业务能力,还需要具备一定的软实力.软实力体现在具体事务的处理能力,包括沟通,协作,团队领导,问题的解决方案等,这些能力在关键时刻比硬性的技术 ...