bendtherules/is-nifty-open
1
0
Fork 0
mirror of https://github.com/bendtherules/is-nifty-open.git synced 2026-08-18 13:52:20 +00:00
Code Issues 20 Packages Projects Releases Wiki Activity

Use media query width instead of device-width

Browse Source
This commit is contained in:
bendtherules
2018-03-12 15:51:12 +05:30
parent 472d197316
commit a6623aa2cf
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Components/IsNiftyOpenApp/App.css
+12 -6
View File
@@ -1,41 +1,47 @@
/* Make responsive by adjusting master text-size em */ /* Make responsive by adjusting master text-size em */
@media screen and (min-device-width: 1441px) { @media screen and (min-width: 1441px) {
.App { .App {
font-size: 2.25em; font-size: 2.25em;
} }
} }
@media screen and (min-device-width: 1025px) and (max-device-width: 1440px) { @media screen and (min-width: 1025px) and (max-width: 1440px) {
.App { .App {
font-size: 1.5em; font-size: 1.5em;
} }
} }
@media screen and (min-device-width: 769px) and (max-device-width: 1024px) { @media screen and (min-width: 769px) and (max-width: 1024px) {
.App { .App {
font-size: 1.2em; font-size: 1.2em;
} }
} }
@media screen and (min-device-width: 601px) and (max-device-width: 768px) { @media screen and (min-width: 601px) and (max-width: 768px) {
.App { .App {
font-size: 0.9em; font-size: 0.9em;
} }
} }
@media screen and (min-device-width: 426px) and (max-device-width: 600px) { @media screen and (min-width: 426px) and (max-width: 600px) {
.App { .App {
font-size: 0.6em; font-size: 0.6em;
} }
} }
@media screen and (min-device-width: 320px) and (max-device-width: 425px) { @media screen and (min-width: 321px) and (max-width: 425px) {
.App { .App {
font-size: 0.45em; font-size: 0.45em;
} }
} }
@media screen and (max-width: 320px){
.App {
font-size: 0.3em;
}
}
.App { .App {
width: 100%; width: 100%;
height: 100%; height: 100%;