Responsive Design常用的媒体查询
来源:互联网 发布:勇士绝杀雷霆数据 编辑:程序博客网 时间:2024/06/06 01:06
(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://www.ido321.com/1540.html
参考文章:
七个高度有效的媒体查询技巧
iPads和iPhones的Media Queries
0 0
- Responsive Design常用的媒体查询
- 响应式设计(Responsive Design)之媒体查询
- React react-responsive媒体查询
- 响应式设计(Responsive Design)【采用媒体查询(Media Queries)方式】
- CSS3媒体查询(@media)详细总结和Responsive浅谈
- 常用移动媒体查询
- 媒体特性与Responsive
- Responsive Web Design 1
- responsive web design
- 读书responsive web design
- web responsive design
- Responsive design for tables
- responsive web design
- Responsive Web Design
- Responsive web design
- Responsive Design with Bootstrap
- 媒体查询的用法?
- 媒体查询的使用
- rails 回调函数
- 乐宾百货报表决策平台效果展示
- Easyui Datagrid的Rownumber行号显示问题
- 标签,样式
- 【用户界面:jQWidgets探索之路系列】之二:jqxGrid
- Responsive Design常用的媒体查询
- WEB架构设计经验分享
- windows Dump 调试
- rails view层的具体细节(一)
- VC EDIT 输入限制操作
- 向量的表示及协方差矩阵
- vim_快捷键操作_动作
- getenv、setenv函数 获取和设置系统环境变量
- 不能将参数2从“const char[15]”转换为“LPCWSTR”与指向的类型无关