Media screen

teroristd

Registered
Здравейте, някой може ли да ми обясни как се използва правилно @media screen.

Това което искам да направя е дизайна да се визуализира различно според екрана. Правя си примерно @media screen and (max-width: 320px) и @media screen and (max-width: 360px), но някои неща не работят коректно. Например на body за 360 слагам червен бекграунд, а на 320 зелен, но се визуализира само червен. Какво трябва да направя за да бъдат нещата както трябва?
 
използвай min-width и max-width заедно

Код:
/* 299px или по-малко */
@media (max-width: 299px) {
    #rd {
        background-color: #0000aa;
    }
}

/* Между 300px и 360px */
@media (min-width: 300px) and (max-width: 360px) {
    #rd {
        background-color: #aa388d;
    }
}

/* над 361px */
@media (min-width: 361px) {
    #rd {
        background-color: #33aa23;
    }
}

https://jsfiddle.net/zxy9e9g1/
 
max-width се отнася до тези 300 писекла

до max-width: 300px; тоест е горната граница.

min-width се отнася че до долната граница пример min-width: 300px;
се показва елемент под 300 пиксела ще се криеш примерно


#rd {
display: block;
}


Примерно под мобилна не искаш да се вижда #rd и така :)
@media (min-width: 361px) {
#rd {
display: none;
}
}

Той човека го е написал добре по-горе!
Успех!
 
Не знам защо, но при мен се получават бъгове по-този начин. @n641951363 би ли дал пример с повече големини. На мен ми трябва точно до 320 пиксела, след това от 320 до 360, до375, до411, до 414 и т.н. В смисъл дизайна на всяка една от тези големини се различава по-нещо от предходния.
 
teroristd каза:
Не знам защо, но при мен се получават бъгове по-този начин. @n641951363 би ли дал пример с повече големини. На мен ми трябва точно до 320 пиксела, след това от 320 до 360, до375, до411, до 414 и т.н. В смисъл дизайна на всяка една от тези големини се различава по-нещо от предходния.
Телефоните отдавна са със full hd -
https://stackoverflow.com/questions/17662886/how-can-a-media-query-detect-a-full-hd-smartphone
 
teroristd каза:
Не знам защо, но при мен се получават бъгове по-този начин. @n641951363 би ли дал пример с повече големини. На мен ми трябва точно до 320 пиксела, след това от 320 до 360, до375, до411, до 414 и т.н. В смисъл дизайна на всяка една от тези големини се различава по-нещо от предходния.

https://jsfiddle.net/zxy9e9g1/1/


heytar каза:
Телефоните отдавна са със full hd -
https://stackoverflow.com/questions/17662886/how-can-a-media-query-detect-a-full-hd-smartphone

по-важен е viewport от резолюцията
за пример аз съм с Samsung S8+ който е 4K но viewport-а е 414px под chrome и 412px под firefox
 
Има всякакви телефони и стари и нови и не всички са HD да не говорим за Full HD. Също така трябва да се има предвид че телефона може да се гледа вертикално и хоризонтално.
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">

потърси инфо за тези неща.
 
Колега, ако ползваш само Max-width или обратното .. ще стават презаписвания. От което ти май страдаш ;д

Та решението е следнното .. сложи си viewport тага и респонсива си го отдели на отделен файл и го дефинирай СЛЕД като си дефинирал базовия стил. (или ако компресираш там всичко в един файл, гледай компресията на респонсива да е в края на файла)

responsive.css
[css]
/* всичко над 1200px vtk.pw */
@media (min-width: 1200px) {
}
/* таблети (хоризонтално) и 1024 десктоп */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* портретни таблети */
@media (min-width: 768px) and (max-width: 991px) {
}

/* ландскейп (хоризонтално) телефони / фаблети / малкки вертицални таблети */
@media (max-width: 767px) {
}
/* малки телефони вертикални */
@media (max-width: 480px) {
}
[/css]

В страницата си трябва да имаш:

<meta name="viewport" content="width=device-width, initial-scale=1">

1.<link href="css/mystyelelelsadsadad.css" rel="stylesheet">
2.<link href="css/responsive.css" rel="stylesheet">

Пробвай и дай фийдбак, трябва всичко да е наред :)
:idea: :?:
 
Благодаря ви за отговорите. Оказва се че главният стил прави поразиите, така че трябва да внимавам какво точно съм писал :) . Иначе почнах да ползвам min-max както предложи @n641951363 и всичко сработва за сега. Изникна ми и едно питане. Трябва ли да имам главен css или всичко може да бъде медия?
 
Разбира се че ще прави :) , тогава идва един случай на !important което е лошо защото правиш на таблет width:20% !important; и по мобилен хващаш долният :D и почваш едни min-width: 20%; става мазалак :) от скоро се занимавам със уеб и е голяма шитня не е като дескстопа макар че едно и също.
 

Горе