Css Tricks Media Queries Code Example


Example 1: css tricks media queries

/* ----------- iPhone 4 and 4S ----------- */  /* Portrait and Landscape */ @media only screen    and (min-device-width: 320px)    and (max-device-width: 480px)   and (-webkit-min-device-pixel-ratio: 2) {  }  /* Portrait */ @media only screen    and (min-device-width: 320px)    and (max-device-width: 480px)   and (-webkit-min-device-pixel-ratio: 2)   and (orientation: portrait) { }  /* Landscape */ @media only screen    and (min-device-width: 320px)    and (max-device-width: 480px)   and (-webkit-min-device-pixel-ratio: 2)   and (orientation: landscape) {  }  /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */  /* Portrait and Landscape */ @media only screen    and (min-device-width: 320px)    and (max-device-width: 568px)   and (-webkit-min-device-pixel-ratio: 2) {  }  /* Portrait */ @media only screen    and (min-device-width: 320px)    and (max-device-width: 568px)   and (-webkit-min-device-pixel-ratio: 2)   and (orientation: portrait) { }  /* Landscape */ @media only screen    and (min-device-width: 320px)    and (max-device-width: 568px)   and (-webkit-min-device-pixel-ratio: 2)   and (orientation: landscape) {  }  /* ----------- iPhone 6, 6S, 7 and 8 ----------- */  /* Portrait and Landscape */ @media only screen    and (min-device-width: 375px)    and (max-device-width: 667px)    and (-webkit-min-device-pixel-ratio: 2) {   }  /* Portrait */ @media only screen    and (min-device-width: 375px)    and (max-device-width: 667px)    and (-webkit-min-device-pixel-ratio: 2)   and (orientation: portrait) {   }  /* Landscape */ @media only screen    and (min-device-width: 375px)    and (max-device-width: 667px)    and (-webkit-min-device-pixel-ratio: 2)   and (orientation: landscape) {   }  /* ----------- iPhone 6+, 7+ and 8+ ----------- */  /* Portrait and Landscape */ @media only screen    and (min-device-width: 414px)    and (max-device-width: 736px)    and (-webkit-min-device-pixel-ratio: 3) {   }  /* Portrait */ @media only screen    and (min-device-width: 414px)    and (max-device-width: 736px)    and (-webkit-min-device-pixel-ratio: 3)   and (orientation: portrait) {   }  /* Landscape */ @media only screen    and (min-device-width: 414px)    and (max-device-width: 736px)    and (-webkit-min-device-pixel-ratio: 3)   and (orientation: landscape) {   }  /* ----------- iPhone X ----------- */  /* Portrait and Landscape */ @media only screen    and (min-device-width: 375px)    and (max-device-width: 812px)    and (-webkit-min-device-pixel-ratio: 3) {   }  /* Portrait */ @media only screen    and (min-device-width: 375px)    and (max-device-width: 812px)    and (-webkit-min-device-pixel-ratio: 3)   and (orientation: portrait) {   }  /* Landscape */ @media only screen    and (min-device-width: 375px)    and (max-device-width: 812px)    and (-webkit-min-device-pixel-ratio: 3)   and (orientation: landscape) {   }

Example 2: media query css for all devices

@media (min-width: 600px) and (max-width: 800px) {  /* your css code here  */  /* html { background: red; } */   }

Example 3: css media queries laptop

@media (max-width: 767px)   {        .container{width:100%} *{color:green;}-Mobile      }       @media (min-width: 768px)  {       .container{width:100%} *{color:pink  } -Desktop      }     @media (min-width: 768px) and (orientation:portrait)  {         .container{width:100%} *{color:yellow  } -Mobile      }     @media (min-width: 1024px)  {         .container{width:100%} *{color:pink  } -Desktop      }     @media (min-width: 1200px)  {      .container{width:1180px} *{color:pink   } -Desktop      }

Comments

Post a Comment

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Answer : Solution 1: As Tan Yong Boon stated, it is Bent’s Rule with which we can explain the lower bond angle of \ce N F 3 \ce{NF3} \ce NF 3 when compared to \ce N H 3 \ce{NH3} \ce N H 3 . The rule as stated by Henry Bent: Atomic s character concentrates in orbitals directed towards electropositive substituents. Fluorine is more electronegative that hydrogen, and the \ce N − F \ce{N−F} \ce N − F bond would have greater p character than the \ce N − H \ce{N−H} \ce N − H bond. And more s character leads to large bond angles. Thus, the bond angle is greater in \ce N H 3 \ce{NH3} \ce N H 3 than in \ce N F 3 \ce{NF3} \ce NF 3 . Now, consider \ce N C l 3 \ce{NCl3} \ce NCl 3 . Clearly, \ce C l \ce{Cl} \ce Cl atom islarger in size than the central atom, nitrogen. Hence the higher bond angle here is due to the steric crowding caused by \ce C l \ce{Cl} \ce Cl atoms.(More pronounced than the electrongativity of \ce C l \ce{Cl} \ce Cl atom). They repel eachother and hence b...
Read more

Can Not Use Command Telnet In Git Bash

Answer : That's because telnet is not provided with git. In windows, you need to go to control panel, programs, turn windows features on/off and enable the telnet client. To add on to @lostbard's answer and @signonsridhar's comment, telnet utility need to be invoked with winpty to work on git bash. Example: MINGW64 ~ $ which telnet /c/WINDOWS/system32/telnet MINGW64 ~ $ winpty telnet localhost 2181 Zookeeper version: 3.4.14-4c25d480e66aadd371de8bd2fd8da255ac140bcf, built on 03/06/2019 16:18 GMT
Read more

AspenTech InfoPlus 21 - How To Connect And Query Data

Image
Answer : InfoPlus21 is process historian containing list of templates of different tag structure e.g. IP_AnalogDef, IP_DescreteDef, IP_TextDef etc. Based on process tags from DCS/OPC/Any other historian, the IP21 records are created and each record acts as a table in historian. ANS1: Aspentech software is only windows based compatibility however IP21 aspenONE Process Explorer is web based and therefore you can access it over any operating system using host url. ANS2: you can try SELECT statement to get data from IP21 Historian using it's end-user component SQLPlus or on excel add-ins. e.g. SELECT NAME, IP_DESCRIPTION, IP_PLANT_AREA, IP_ENG_UNITS FROM IP_ANALOGDEF RESULTS: I hope this help you understand better. Otherwise you need to first learn the structure of your IP21 historian tags to build the query e.g. If it has customized structure, then you have to build your own. Welcome in industrial-IT ! For these technology, the best option is the 'AspenTech...
Read more