(PS:原文写于2012年,本文参照原文作了适当修改,不当之处请指出)
现在Web朝着响应式的趋势发展,媒体查询在创建响应式网站中起到了主要作用。
没有媒体查询几乎不能实现响应式设计,利用媒体查询,我们可以针对特定的设备,如显示器、智能手机和平板,写CSS。
媒体查询是响应式设计的核心
在这篇文章中我将分享一些到目前为止我收集到的常用媒体查询。在一些示例中,我可能是错误的,但是不用担心,因为我针对这个开通了评论功能。我把它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询
显示器媒体查询
显示器媒体查询是以屏幕大小为基础划分的
640px
@media screen and (max-width: 640px)
{
}
800px
@media screen and (max-width: 800px)
{
}
1024px
@media screen and (max-width: 1024px)
{
}
智能手机媒体查询
适用于大部分主流智能手机
iPhone(2G-4S)
/*Landscape Mode*/
@media screen and (max-device-width: 480px)
{
}
/* Portrait Mode */
@media screen and (max-device-width: 320px)
{
}
iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
}
iPhone5
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* 样式写在这里 */
}
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*/
}
HTC Evo,BlackBerry Torch,HTC Thunderbolt,HD2
@media screen and (max-device-width: 480px)
{
}
平板媒体查询
这个列表会有点长
iPad
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
iPad 2
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
iPad 3
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
iPad mini
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* 样式写在这里 */
}
Samsung Galaxy Tab 10.1
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
Motorola Xoom
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
HTC Flyer
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{
}
BlackBerry PlayBook
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{
}
HP TouchPad
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
Lenovo Thinkpad Tablet
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
Sony Tablet S
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
T-Mobile G-Slate
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait)
{
}
ViewSonic ViewPad 10
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait)
{
}
Dell Streak 7
/* Landscape Mode */
@media (max-device-width: 800px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 480px) and (orientation: portrait)
{
}
ASUS Eee Pad Transformer
/* Landscape Mode */
@media (max-device-width: 1080px) and (orientation: landscape)
{
}
/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait)
{
}
英文原文:Some Media Queries for Responsive Design
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。