[teroristd]

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

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

[n641951363]

използвай 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/

[novakabg]

max-width се отнася до тези 300 писекла

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

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


#rd {
display: block;
}


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

Той човека го е написал добре по-горе!
Успех!

[teroristd]

Не знам защо, но при мен се получават бъгове по-този начин. @n641951363 би ли дал пример с повече големини. На мен ми трябва точно до 320 пиксела, след това от 320 до 360, до375, до411, до 414 и т.н. В смисъл дизайна на всяка една от тези големини се различава по-нещо от предходния.

[heytar]

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

[n641951363]

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

[teroristd]

Има всякакви телефони и стари и нови и не всички са HD да не говорим за Full HD. Също така трябва да се има предвид че телефона може да се гледа вертикално и хоризонтално.

[novakabg]

<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">

потърси инфо за тези неща.

[joTunkiq]

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

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

responsive.css

CSS code:

/*  всичко над 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) {
}

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

Цитат:

<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">

Пробвай и дай фийдбак, трябва всичко да е наред

[teroristd]

Благодаря ви за отговорите. Оказва се че главният стил прави поразиите, така че трябва да внимавам какво точно съм писал . Иначе почнах да ползвам min-max както предложи @n641951363 и всичко сработва за сега. Изникна ми и едно питане. Трябва ли да имам главен css или всичко може да бъде медия?

[novakabg]

Разбира се че ще прави , тогава идва един случай на !important което е лошо защото правиш на таблет width:20% !important; и по мобилен хващаш долният и почваш едни min-width: 20%; става мазалак от скоро се занимавам със уеб и е голяма шитня не е като дескстопа макар че едно и също.

[teroristd]

Благодаря.