Last active
December 27, 2015 00:59
-
-
Save flarnie/7241173 to your computer and use it in GitHub Desktop.
CSS3 Media Queries Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="media_qs.css" > | |
| </head> | |
| <body> | |
| <b>HELLO WORLD.</b> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (max-width:1490px){ body { background-color: SlateBlue; }} | |
| @media (max-width:1480px){ body { background-color: Salmon; }} | |
| @media (max-width:1470px){ body { background-color: Bisque; }} | |
| @media (max-width:1460px){ body { background-color: Red; }} | |
| @media (max-width:1450px){ body { background-color: LightSalmon; }} | |
| @media (max-width:1440px){ body { background-color: PapayaWhip; }} | |
| @media (max-width:1430px){ body { background-color: Cyan; }} | |
| @media (max-width:1420px){ body { background-color: LimeGreen; }} | |
| @media (max-width:1410px){ body { background-color: Yellow; }} | |
| @media (max-width:1400px){ body { background-color: Plum; }} | |
| @media (max-width:1390px){ body { background-color: Olive; }} | |
| @media (max-width:1380px){ body { background-color: AquaMarine; }} | |
| @media (max-width:1370px){ body { background-color: Ivory; }} | |
| @media (max-width:1360px){ body { background-color: Maroon; }} | |
| @media (max-width:1350px){ body { background-color: MediumSpringGreen; }} | |
| @media (max-width:1340px){ body { background-color: Black; }} | |
| @media (max-width:1330px){ body { background-color: MistyRose; }} | |
| @media (max-width:1320px){ body { background-color: LightBlue; }} | |
| @media (max-width:1310px){ body { background-color: DodgerBlue; }} | |
| @media (max-width:1300px){ body { background-color: WhiteSmoke; }} | |
| @media (max-width:1290px){ body { background-color: BlanchedAlmond; }} | |
| @media (max-width:1280px){ body { background-color: Silver; }} | |
| @media (max-width:1270px){ body { background-color: SaddleBrown; }} | |
| @media (max-width:1260px){ body { background-color: Gainsboro; }} | |
| @media (max-width:1250px){ body { background-color: Thistle; }} | |
| @media (max-width:1240px){ body { background-color: SeaGreen; }} | |
| @media (max-width:1230px){ body { background-color: PaleGoldenRod; }} | |
| @media (max-width:1220px){ body { background-color: Azure; }} | |
| @media (max-width:1210px){ body { background-color: YellowGreen; }} | |
| @media (max-width:1200px){ body { background-color: Salmon; }} | |
| @media (max-width:1190px){ body { background-color: DarkOrchid; }} | |
| @media (max-width:1180px){ body { background-color: Crimson; }} | |
| @media (max-width:1170px){ body { background-color: Purple; }} | |
| @media (max-width:1160px){ body { background-color: DeepSkyBlue; }} | |
| @media (max-width:1150px){ body { background-color: LightGoldenrodYellow; }} | |
| @media (max-width:1140px){ body { background-color: Aqua; }} | |
| @media (max-width:1130px){ body { background-color: Gray; }} | |
| @media (max-width:1120px){ body { background-color: Chocolate; }} | |
| @media (max-width:1110px){ body { background-color: DarkOrange; }} | |
| @media (max-width:1100px){ body { background-color: MediumSpringGreen; }} | |
| @media (max-width:1090px){ body { background-color: Brown; }} | |
| @media (max-width:1080px){ body { background-color: PaleGreen; }} | |
| @media (max-width:1070px){ body { background-color: Orange; }} | |
| @media (max-width:1060px){ body { background-color: LightSteelBlue; }} | |
| @media (max-width:1050px){ body { background-color: Thistle; }} | |
| @media (max-width:1040px){ body { background-color: MediumSpringGreen; }} | |
| @media (max-width:1030px){ body { background-color: BlanchedAlmond; }} | |
| @media (max-width:1020px){ body { background-color: LightYellow; }} | |
| @media (max-width:1010px){ body { background-color: SeaShell; }} | |
| @media (max-width:1000px){ body { background-color: GreenYellow; }} | |
| @media (max-width:990px){ body { background-color: DarkGreen; }} | |
| @media (max-width:980px){ body { background-color: OrangeRed; }} | |
| @media (max-width:970px){ body { background-color: LightCyan; }} | |
| @media (max-width:960px){ body { background-color: DimGray; }} | |
| @media (max-width:950px){ body { background-color: Snow; }} | |
| @media (max-width:940px){ body { background-color: PapayaWhip; }} | |
| @media (max-width:930px){ body { background-color: Purple; }} | |
| @media (max-width:920px){ body { background-color: OldLace; }} | |
| @media (max-width:910px){ body { background-color: Linen; }} | |
| @media (max-width:900px){ body { background-color: MintCream; }} | |
| @media (max-width:890px){ body { background-color: LightPink; }} | |
| @media (max-width:880px){ body { background-color: ForestGreen; }} | |
| @media (max-width:870px){ body { background-color: DarkSlateGray; }} | |
| @media (max-width:860px){ body { background-color: BurlyWood; }} | |
| @media (max-width:850px){ body { background-color: Snow; }} | |
| @media (max-width:840px){ body { background-color: Gainsboro; }} | |
| @media (max-width:830px){ body { background-color: Cornsilk; }} | |
| @media (max-width:820px){ body { background-color: LimeGreen; }} | |
| @media (max-width:810px){ body { background-color: Coral; }} | |
| @media (max-width:800px){ body { background-color: Magenta; }} | |
| @media (max-width:790px){ body { background-color: DarkOrchid; }} | |
| @media (max-width:780px){ body { background-color: Lavender; }} | |
| @media (max-width:770px){ body { background-color: DarkOliveGreen; }} | |
| @media (max-width:760px){ body { background-color: LightSkyBlue; }} | |
| @media (max-width:750px){ body { background-color: LightCoral; }} | |
| @media (max-width:740px){ body { background-color: Tan; }} | |
| @media (max-width:730px){ body { background-color: DarkViolet; }} | |
| @media (max-width:720px){ body { background-color: Thistle; }} | |
| @media (max-width:710px){ body { background-color: Wheat; }} | |
| @media (max-width:700px){ body { background-color: MediumSpringGreen; }} | |
| @media (max-width:690px){ body { background-color: Peru; }} | |
| @media (max-width:680px){ body { background-color: MediumVioletRed; }} | |
| @media (max-width:670px){ body { background-color: Lime; }} | |
| @media (max-width:660px){ body { background-color: MediumSlateBlue; }} | |
| @media (max-width:650px){ body { background-color: PaleGreen; }} | |
| @media (max-width:640px){ body { background-color: NavajoWhite; }} | |
| @media (max-width:630px){ body { background-color: Turquoise; }} | |
| @media (max-width:620px){ body { background-color: LightGreen; }} | |
| @media (max-width:610px){ body { background-color: Chocolate; }} | |
| @media (max-width:600px){ body { background-color: SlateBlue; }} | |
| @media (max-width:590px){ body { background-color: Sienna; }} | |
| @media (max-width:580px){ body { background-color: Gold; }} | |
| @media (max-width:570px){ body { background-color: Magenta; }} | |
| @media (max-width:560px){ body { background-color: LawnGreen; }} | |
| @media (max-width:550px){ body { background-color: OrangeRed; }} | |
| @media (max-width:540px){ body { background-color: Brown; }} | |
| @media (max-width:530px){ body { background-color: DarkSalmon; }} | |
| @media (max-width:520px){ body { background-color: DarkGreen; }} | |
| @media (max-width:510px){ body { background-color: Lime; }} | |
| @media (max-width:500px){ body { background-color: PaleVioletRed; }} | |
| @media (max-width:490px){ body { background-color: MediumPurple; }} | |
| @media (max-width:480px){ body { background-color: Lavender; }} | |
| @media (max-width:470px){ body { background-color: CadetBlue; }} | |
| @media (max-width:460px){ body { background-color: Gainsboro; }} | |
| @media (max-width:450px){ body { background-color: MediumOrchid; }} | |
| @media (max-width:440px){ body { background-color: PaleGoldenRod; }} | |
| @media (max-width:430px){ body { background-color: Aqua; }} | |
| @media (max-width:420px){ body { background-color: Linen; }} | |
| @media (max-width:410px){ body { background-color: OrangeRed; }} | |
| @media (max-width:400px){ body { background-color: Lavender; }} | |
| @media (max-width:390px){ body { background-color: DodgerBlue; }} | |
| @media (max-width:380px){ body { background-color: LightSalmon; }} | |
| @media (max-width:370px){ body { background-color: HotPink; }} | |
| @media (max-width:360px){ body { background-color: Beige; }} | |
| @media (max-width:350px){ body { background-color: Ivory; }} | |
| @media (max-width:340px){ body { background-color: LightSteelBlue; }} | |
| @media (max-width:330px){ body { background-color: Violet; }} | |
| @media (max-width:320px){ body { background-color: Turquoise; }} | |
| @media (max-width:310px){ body { background-color: Chocolate; }} | |
| @media (max-width:300px){ body { background-color: CadetBlue; }} | |
| @media (max-width:290px){ body { background-color: Coral; }} | |
| @media (max-width:280px){ body { background-color: Violet; }} | |
| @media (max-width:270px){ body { background-color: Fuchsia; }} | |
| @media (max-width:260px){ body { background-color: LightSeaGreen; }} | |
| @media (max-width:250px){ body { background-color: OldLace; }} | |
| @media (max-width:240px){ body { background-color: FireBrick; }} | |
| @media (max-width:230px){ body { background-color: PowderBlue; }} | |
| @media (max-width:220px){ body { background-color: Cyan; }} | |
| @media (max-width:210px){ body { background-color: FireBrick; }} | |
| @media (max-width:200px){ body { background-color: Salmon; }} | |
| @media (max-width:190px){ body { background-color: GhostWhite; }} | |
| @media (max-width:180px){ body { background-color: LightSteelBlue; }} | |
| @media (max-width:170px){ body { background-color: Olive; }} | |
| @media (max-width:160px){ body { background-color: CornFlowerBlue; }} | |
| @media (max-width:150px){ body { background-color: Peru; }} | |
| @media (max-width:140px){ body { background-color: Crimson; }} | |
| @media (max-width:130px){ body { background-color: DarkCyan; }} | |
| @media (max-width:120px){ body { background-color: DarkGray; }} | |
| @media (max-width:110px){ body { background-color: LightPink; }} | |
| @media (max-width:100px){ body { background-color: MediumSlateBlue; }} | |
| @media (max-width:90px){ body { background-color: PaleGoldenRod; }} | |
| @media (max-width:80px){ body { background-color: SlateBlue; }} | |
| @media (max-width:70px){ body { background-color: HoneyDew; }} | |
| @media (max-width:60px){ body { background-color: MediumBlue; }} | |
| @media (max-width:50px){ body { background-color: Navy; }} | |
| @media (max-width:40px){ body { background-color: LightGreen; }} | |
| @media (max-width:30px){ body { background-color: MediumOrchid; }} | |
| @media (max-width:20px){ body { background-color: MediumTurquoise; }} | |
| @media (max-width:10px){ body { background-color: LightCyan; }} | |
| @media (max-width:0px){ body { background-color: Yellow; }} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment