Add media queries for most popular devices (#19)
https://deviceatlas.com/blog/viewport-resolution-diagonal-screen-size-and-dpi-most-popular-smartphones
This commit is contained in:
parent
45535cd290
commit
0dca3b1800
1 changed files with 40 additions and 0 deletions
|
@ -113,3 +113,43 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
@media only screen and (max-width: 576px) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
.top-left {
|
||||||
|
left: -52%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right {
|
||||||
|
left: 52%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Galaxy S5, Moto G4 */
|
||||||
|
@media only screen and (max-width: 360px) {
|
||||||
|
.top-left {
|
||||||
|
left: -56%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right {
|
||||||
|
left: 56%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
.top-left {
|
||||||
|
left: -64%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right {
|
||||||
|
left: 64%;
|
||||||
|
top: -50%;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue