iPhone的CSS3媒体查询

iPhone的CSS3媒体查询:

  各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下:

iPhone6的媒体查询:

@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*/

引用自:iPhone6的CSS3媒体查询

各手机端版本分辨率与CSS中的实际分辨率对照区别表格:

引用自:mydevice.io

时间: 2024-08-07 08:39:41

iPhone的CSS3媒体查询的相关文章

iPhone6的CSS3媒体查询

@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) { /*iPh

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)

/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-wi

iPhone系列设备媒体查询:

这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) { //针对iPhone 4, 5c,5s, 所有iPhone6的放大模式,个别iPhone6

css3 媒体查询

最近一直没网,好不容易有网络了,大概了解了下,媒体查询的东西,css3的部分,下面是从网上查到的信息,一起看看吧. 其实我了解的媒体查询就是 :我们的网页能够让用户 在 不同尺寸的移动设备上面都有很好的用户体验, 作为CSS3规范的一部分,媒体查询扩展了media属性(控制您的样式应用方式)的角色.例如,多年来人们常常使用一种独立的样式表,通过指定media="print"来打印网页.媒体查询将这一理念提升到了更高层次,允许设计人员基于各种不同的设备属性(比如屏幕宽度.方向等)来确定目

css3 媒体查询的学习。

1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有 width . height 和 color (等).使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果. 2.为什么响应式设计需要,媒体查询如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式 3.如何在CSS文件中引入媒

css3媒体查询

@media (min-width: 320px) { html { font-size: 100px; }}@media (min-width: 360px) { html { font-size: 112.5px; }}@media (min-width: 400px) { html { font-size: 125px; }} 1号店的媒体查询,也可以用淘宝的js代码,但是加载JS会在JS未完全加载好前布局是乱的,所以还是用css3直接做媒体查询把...

css3媒体查询实现网站响应式布局

响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词.因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢?这样既节约制造成本,又节省空间,还能体验创意性的生活. 先来给大家欣赏几张图大黄蜂: 沙发床: 没错!大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机,沙发床.沙发座椅是我们见过再平常不过的家具了.我们总是惊叹外国人为什么有这么丰富的想象力和神奇的创造力.而是什么驱动他们去想象进而

CSS3 媒体查询响应式布局

在这个以手机.平板和电脑为中心的互联网时代.为了提高用户体验度,让页面适应不同屏幕的分辨率成了我们写页面时最至关重要的问题.CSS3中的媒体查询功能很好的帮我们解决了这一问题,它可以根据屏幕的大小进行上扩和下扩呈现给用户一个可用的界面. 刚开始接触媒体查询这个功能,我一边感慨它的强大,一边焦虑着我应该怎么去用它呢?首先我们得对它进行一个详细的认识和了解. 媒体查询就是通过不同的媒体类型和条件定义样式表的规则.可以让CSS更精确的作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都

CSS3媒体查询总结

1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有 width . height 和 color (等).使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果. 2.为什么响应式设计需要,媒体查询如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式 3.如何在CSS文件中引入媒