Media query for most common ces

-

Media query for most common devices:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

For all Phones:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }

For All Portrait Devices:

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 

For Landscape:

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

For Laptop and Desktop:

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

I have been using following media query for most common devices:

i) Normal 

    @media only screen and (min-width: 768px) { /* tablets and desktop */ }
    @media only screen and (max-width: 767px) { /* phones */ }  
    @media only screen and (max-width: 767px) and (orientation: portrait) { /* portrait phones */ }

ii) Best one

 /* SMARTPHONES PORTRAIT */  @media only screen and (min-width: 300px) { } 

/* SMARTPHONES LANDSCAPE */ @media only screen and (min-width: 480px) { } 

/*TABLETS PORTRAIT */ @media only screen and (min-width: 768px) { } 

/* TABLET LANDSCAPE / DESKTOP */ @media only screen and (min-width: 1024px) { }

Comments

Post a Comment

Popular posts from this blog

Module Bundel

-
package.,json {    "name" :  " moduletutorial " ,    "version" :  " 1.0.0 " ,    "description" :  " creating module " ,    "main" :  " dom.js " ,    "scripts" : {      "test" :  " echo  \" Error: no test specified \"  && exit 1 " ,      "start" :  " webpack "   },    "author" :  "" ,    "license" :  " ISC " ,    "dependencies" : {      "webpack" :  " ^4.39.3 " ,      "webpack-cli" :  " ^3.3.8 "   } } webpack.config.js var   path   =   require ( " path " ); module . exports   =  {     entry: ' ./app.js ' ,     output: {         path:  path . resolve (__dirname),         filename:  ' main.js '     },     mode:  ' development ' }
Read more

Power of async and Promise

-
///////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////// Async //////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////// // const promise = fetch('https://jsonplaceholder.typicode.com/todos') // promise // .then(res => res.json()) // .then(data => console.log(data)) // .catch(err => console.log(err)) const getBlogs = async ( name ) => { const fruits = { " one " : " One 1 " , " two " : " Two 2 " , " three " : " Three 3 " } await delay ( 2000 ); return Promise . resolve ( fruits [ name ]); } // for small const makeMe = async () => { try {
Read more