文档章节

iPhone6&iPhone6 Plus CSS3 Media Queries

豆花饭烧土豆
 豆花饭烧土豆
发布于 2016/03/24 00:56
字数 154
阅读 27
收藏 0

CSS3 Media Queries查询

mediaiPhone6&iPhone6 Plus CSS3 Media Queries

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
     /*iPhone 6 Portrait*/
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
     /*iPhone 6 landscape*/
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
     /*iPhone 6+ Portrait*/
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
     /*iPhone 6+ landscape*/
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
     /*iPhone 6 and iPhone 6+ portrait and landscape*/
}

@media only screen and (max-device-width: 640px), only
 screen and (max-device-width: 667px), only screen and (max-width: 
480px) and (orientation : portrait){
     /*iPhone 6 and iPhone 6+ portrait*/
}

@media only screen and (max-device-width: 640px), only
 screen and (max-device-width: 667px), only screen and (max-width: 
480px) and (orientation : landscape){
     /*iPhone 6 and iPhone 6+ landscape*/
}

http://nmsdvid.com/snippets/

© 著作权归作者所有

豆花饭烧土豆

豆花饭烧土豆

粉丝 15
博文 357
码字总数 93591
作品 0
深圳
私信 提问
CSS3 Media Queries 实现响应式设计

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并...

BearCatYN
2014/06/10
93
0
【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

前言 无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。 回想几个月前,我一直在纠结自己应该学习HTML5...

范大脚脚
2017/12/14
0
0
CSS3 响应式布局 Media Queries 媒体查询学习

css3 响应式布局学习 响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化 响应不同的设备 涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询” Media Queries 用法...

一介布衣
2015/09/23
0
0
CSS3 动画媒体查询(Animated Media Queries)

网站设计的一个新趋势是使用media queries(媒体查询),这是因为如今有大量的设备可以访问因特网,因此所有的网站都需要适应各种设备。responsive design(响应设计)应运而生。它可以发现用...

虫虫
2012/04/25
2.8K
1
CSS3 Media Queries

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link hr......

上赶的大老鼠
2014/02/25
38
0

没有更多内容

加载失败,请刷新页面

加载更多

Android面试常客之Handler全解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/fnhfire_7030/article/details/79518819 前言:又到了一年...

shzwork
32分钟前
4
0
position sticky 定位

本文转载于:专业的前端网站➫position sticky 定位 1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky:粘性。粘性布局。 在屏幕范围内时...

前端老手
39分钟前
4
0
CentOS 7 yum 安装 PHP7.3 教程

参考:https://www.mf8.biz/centos-rhel-install-php7-3/ 1、首先安装 EPEL 源: yum install epel-release 安装 REMI 源: yum install http://rpms.remirepo.net/enterprise/remi-release......

dragon_tech
54分钟前
4
0
Linux物理网卡聚合及桥接

Linux内部实现的bridge可以把一台机器上的多张网卡桥接起来,从而把自己作为一台交换机。同时,LInux bridge还支持虚拟端口,即桥接的不一定都是物理网卡接口,还可以是虚拟接口。目前主要表...

xiangyunyan
54分钟前
4
0
一起来学Java8(一)——函数式编程

在这篇文章中,我们将了解到在Java8下如何进行函数式编程。 函数式编程 所谓的函数式编程就是把函数名字当做值进行传递,然后接收方拿到这个函数名进行调用。 首先来看下JavaScript如何进行函...

猿敲月下码
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部