I am very new to web-front-end-development and I'm trying to develop a responsive website. I have decided on 5 breakpoints, i.e. mobile(2-portrait-landscape) from 320px-768px, tablets(2-portrait-landscape) from 769px-1024px, Desktop-Small from 1025px-1280px, Desktop-Medium from 1281px-1366px, Desktop-Large from 1367px-1680px and Desktop-ExtraLarge from 1681px-Above.
When I tested my first layout, developed on a Mac-Retina-13", the site looked reasonably okay on Safari & Chrome. But, it completely got distorted on an Acer-Windows-15", on Firefox & Chrome.
Then with some research I got to know about http://mydevice.io/ and Device-pixel-ratios.
I would like to know, in order to have a consistent viewing experience, across device regardless of the device resolutions & screen sizes, will I be using the following media queries?
/* Phones - portait */
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 144dpi){
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 192dpi){
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 288dpi){
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 384dpi){
}
/* Phones - landscape */
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 144dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 288dpi) {
}
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 384dpi) {
}
/* Tablets - Portrait */
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 192dpi) {
}
/* Tablets - Landscape */
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 192dpi) {
}
/* Desktop - Small */
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 192dpi) {
}
/* Desktop - Medium */
@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 192dpi) {
}
/* Desktop - Large */
@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 192dpi) {
}
/* Desktop - ExtraLarge */
@media only screen and (min-width: 1681px) and (min-resolution: 96dpi) {
}
@media only screen and (min-width: 1681px) and (min-resolution: 192dpi) {
}
///
Will I have to use these 23 media-queries? Am I going wrong somewhere?
Aucun commentaire:
Enregistrer un commentaire