/*orientation:portrait纵向*/
/*orientation:landscape横向*/
/*iPhone 4*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) {
.m_game .ip_down{top:63%;}
.m_game .an_down{top:63%;}
}
/*iPhone 5*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : portrait) {
.m_game .ip_down{top:51%;}
.m_game .an_down{top:51%;}
}
/*iPhone 6*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
.m_game .ip_down{top:49%;}
.m_game .an_down{top:49%;}
}
/*iPhone 6 Plus*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
.m_game .ip_down{top:48%;}
.m_game .an_down{top:48%;}
}

CSS媒体查询适配范例的更多相关文章

  1. css媒体查询aspect-ratio宽高比在less中的使用

    css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配   使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...

  2. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  3. css媒体查询:响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  4. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  5. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  6. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  7. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

  8. 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

  9. CSS:使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

随机推荐

  1. view里面的tableview顶部被view的导航栏盖住了的问题

    在你要显示的控制器的viewDidLoad中添加代码 self.edgesForExtendedLayout = UIRectEdgeNone; 另外记住tableView要遵循代理cell才能显示. ...

  2. DHCP协议

    来源摘取自百度百科 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服 ...

  3. PickerController 添加照片---iOS

    前言 添加照片我们常用的地方有,更换头像,发布状态,朋友圈的时候等等,那我们接下来看看怎么添加上照片吧~ github: 效果图: 正文 1.你可以直接写,也可以声明一个属性.我习惯声明一个属性. @ ...

  4. H5中背景音乐无法自动播放问题

    苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...

  5. 从0移植uboot (二) _启动流程分析

    经过了上一篇的配置,我们已经执行make就可以编译出一个uboot.bin,但这还不够,首先,此时的uboot并不符合三星芯片对bootloader的格式要求,其次,此时的uboot.bin也没有结合 ...

  6. [Linux] PHP程序员玩转Linux系列-备份还原MySQL

    1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 前几天有个新闻,说是g ...

  7. 微信内置浏览器私有接口WinXinJsBridge介绍

    关于微信内置浏览器私有接口WeiXinJsBridge,只是之前接触过的一个微信公众号项目中遇到过,不过并没有深入研究过,可以说并没有了解过... 刚好今天无意中看到了这方面的知识,就补习一下,弥补一 ...

  8. Angular.js之内置过滤器学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. javascipt : filter

    过滤 var List = sizes.filter(function (size) { return size.id == 12; }); sizes = [ {id : 10,,stock:130 ...

  10. VUE2.0实现购物车和地址选配功能学习第七节

    第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{ ...