What is a Media Query?
|
sam
378
Points
48
Posts
|
Hi,
Please help...
Views:
9752
Total Answered: 3 Total Marked As Answer: 0 Posted On: 26-Dec-2015 09:36 Share: 
|
Answers
|
Rahul M...
4822
Points
23
Posts
|
Hi sam, Media query is a CSS technique (different style rules for different media types/devices) introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is fulfilled. It has syntax as: @media not|only mediatype and (media feature) {
CSS-Code; } Where Media Types
Media Features
You can use it in html page or in css file. @media only screen and (max-width: 500px) {
.mainmenu { width:100%; } }
Posted On:
27-Dec-2015 01:31
|
|
sam
378
Points
48
Posts
|
Hi Rahul Maurya, Thank... I am working on responsive site. Is there fixed media query for all stadard devices available nowaday.
Posted On:
27-Dec-2015 01:47
|
|
Jak
858
Points
132
Posts
|
Yes, Following are the media query for the standard sizes: /*Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*Your Styles */
}
/*Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/*Your Styles */
}
/*Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/*Your Styles */
}
/*iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*Your Styles */
}
/*iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Your Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Your Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Your Styles */
}
@media
only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/*Your Styles */
}
/*Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/*Your Styles */
}
/*Large screens ----------- */
@media only screen and (min-width : 1824px) {
/*Your Styles */
}
/*iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/*Your Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/*Your Styles */
}
/*iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/*Your Styles */
}
/*Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}
/*Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/*Your Styles */
}
Posted On:
27-Dec-2015 02:18
|
