本文介绍了所有设备的HTML5应用程序的媒体查询的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

任何一个有想法,关于所有媒体查询
,这将有助于检测个别设备,例如:



iOS,iPhone 5,iPhone Ratina显示,android手机。 ,http:// css-tricks。

com / snippets / css / media-queries-for-standard-devices /> 媒体查询标准设备

  / *智能手机(纵向和横向)----------- * / 
@media只有屏幕
和-width:320px)
and(max-device-width:480px){
/ * Styles * /
}

/ *智能手机--------- * /
@media only screen
and(min-width:321px){
/ * Styles * /
}

/ *智能手机(肖像)----------- * /
@media只有屏幕
和(max-width:320px){
/ *样式* /
}

/ * iPad(纵向和横向)----------- * /
@media只有屏幕
和(min-device-width:768px)
and(max-device-width:1024px){
/ * Styles * /
}

/ * iPads landscape)----------- * /
@media only screen
and(min-device-width:768px)
and(max-device-width:1024px )
和(orientation:landscape){
/ *样式* /
}

/ * iPads - * /
@media only screen
and(min-device-width:768px)
and(max-device-width:1024px)
and(orientation:portrait){
/ *样式* /
}

/ *台式机和笔记本电脑----------- * /
@media只有屏幕
和(min-width:1224px){
/ *样式* /
}

/ *大屏幕----------- *
@media only screen
and(min-width:1824px){
/ * Styles * /
}

/ * iPhone 4 --- -------- * /
@media
只有屏幕和(-webkit-min-device-pixel-ratio:1.5),
只有屏幕和(min- pixel-ratio:1.5){
/ * Styles * /
}

对于Retina显示使用

  @media 
只有屏幕和(-webkit-min-device-pixel-ratio:2 ),
only screen and(min-resolution:192dpi){
/ * Retina-specific stuff here * /
}


Any one Have Idea , about all media queries that will help to detect individual devices such as:

iOS,iPhone 5 , iPhone Ratina display , android mobile. , ipad, tablets atc ?

解决方案

go for media-queries-for-standard-devices

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

For Retina Display use

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

这篇关于所有设备的HTML5应用程序的媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 13:57