本文介绍了所有设备的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应用程序的媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!