常见设备查询方式
来源:互联网 发布:云计算 大事件 编辑:程序博客网 时间:2024/06/10 18:16
常见设备查询方式
媒体查询是响应式设计的核心,它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询
显示器媒体查询
显示器媒体查询是以屏幕大小为基础划分的
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 6Portrait*/
}
@media only screen and (min-device-width: 375px) and(max-device-width: 667px) and (orientation : landscape) {
/*iPhone 6landscape*/
}
@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), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px){
/*iPhone 6and iPhone 6+ portrait and landscape*/
}
@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px) and(orientation : portrait){
/*iPhone 6and iPhone 6+ portrait*/
}
@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px) and(orientation : landscape){
/*iPhone 6and 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) {
}
- 常见设备查询方式
- 字符设备驱动程序之按键——查询方式
- 字符设备驱动程序之查询方式的按键驱动程序
- 字符设备驱动查询方式读取按键值
- 字符设备驱动--查询方式的按键驱动
- ORACLE 数据去重查询的几种常见方式
- 几种常见的分页查询实现方式
- 常见设备的GUID
- 视频设备常见接头
- 【iOS】设备常见传感器
- 常见设备的GUID
- 计算机网络中常见设备
- Linux常见设备
- 字符设备驱动之按键处理一(查询方式的按键驱动程序)
- 字符设备驱动学习笔记----查询方式取得按键值
- 跟着韦东山老师学字符设备驱动之查询方式的按键驱动程序分析
- 第12课第3节 字符设备驱动程序之查询方式的按键驱动程序
- 韦东山第12课-字符设备、中断方式查询驱动
- 写了2个小游戏项目斗地主,麻将
- 关于递归的若干问题
- mvn配置
- 258. Add Digits
- interface f0/0与interface serial0/0的区别
- 常见设备查询方式
- 阿狸面经(牛客网)
- JVM内存结构浅析
- Android Studio安装记录
- vim+go配置
- [ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action
- bzoj 3503(解异或方程组)
- 数组模拟实现邻接表
- JVM——垃圾回收机制入门