当前位置: 首页 » 笔记 » media query 在响应式网页中的应用

media query 在响应式网页中的应用

haibao 笔记 2014-09-01 22:22:23 515 百度已收录
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

晚上好, 本文除去代码部分,共1356个字,预计阅读时间需要4分钟。

我们都知道html5中的媒体查询(media query)对于响应试网页的重要性,它为我们提供了检测屏幕设备的有效方法,所以,当我们开发页面的时候,就可以很方便的根据media query 来检查屏幕尺寸,并加载相应的css样式。

但是,从目前我们常见的桌面电脑、平板电脑再到智能手机,屏幕尺寸如此之多以至让许多web前端开发者们都十分头疼。最近发现了一个非常实用的网站responsivewebcss,它为响应试网页开发者们提供了一个专门的屏幕尺寸检测工具,进入网站后,只需选择相应的屏幕设备尺寸,该工具就会为你自动生成相应的媒体查询。

以下是总结的媒体查询代码,涉及了目前主流设备屏幕的尺寸,希望对大家有所帮助。当我们使用的时候,直接将相依的css样式放入media媒体查询内即可。

在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5。]

那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机

iPhone4/4s的分辨率为640*960 pixels,DPI为是320*480,设备高度为480px

iPhone5的分辨率为640*1136 pixels,DPI依然是320*568,设备高度为568px

iPhone6的分辨率为750*1334 pixels,DPI依然是375*667,设备高度为667px

iPhone6 Plus的分辨率为1242×2208 pixels,DPI依然是414*736,设备高度为736px

方式一,直接写到样式里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
 
    .class{}
 
}
 
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
 
    .class{}
 
}
 
 
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
 
    .class{}
 
}
 
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
 
    .class{}
 
}

方式二,链接到一个单独的样式表,把下面的代码放在标签里

1
2
3
4
5
6
7
<link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />
 
<link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />
 
<link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" />
 
<link rel="stylesheet" media="(device-height: 736px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" />

方式三,使用JS

//通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 Plus

1
2
3
4
5
6
7
isPhone4inches = (window.screen.height==480);
 
isPhone5inches = (window.screen.height==568);
 
isPhone6inches = (window.screen.height==667);
 
isPhone6pinches = (window.screen.height==736);

移动开发发展飞猛,各种新的设备也不断的出现,我们在向后兼容的同时,也需要不断术向前学习,赶上时代步伐~

本文标题:media query 在响应式网页中的应用

本文地址:http://www.hehaibao.com/media-query/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注