- Media screen
WT форуми -> HTML / Javascript / CSS -> Media screen
Създайте нова тема Напишете отговор 
Автор Съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 07/11/2017 1:24 pm     Media screen Отговорете с цитат


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

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

Регистриран на: 29/08/2017 2:35 pm

Support: 3
Bonus: 6
Мнения: 28
Мнение 07/11/2017 1:49 pm      Отговорете с цитат


използвай 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
Турист
Турист

Регистриран на: 13/05/2016 2:29 pm

Support: 5
Bonus: 10
Мнения: 246
Мнение 07/11/2017 2:48 pm      Отговорете с цитат


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

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

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


#rd {
display: block;
}


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

Той човека го е написал добре по-горе!
Успех!
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 07/11/2017 3:38 pm      Отговорете с цитат


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

Регистриран на: 29/06/2015 9:28 am

Support: 0
Bonus: 0
Мнения: 59
Мнение 07/11/2017 3:46 pm      Отговорете с цитат


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
Нов
Нов

Регистриран на: 29/08/2017 2:35 pm

Support: 3
Bonus: 6
Мнения: 28
Мнение 07/11/2017 4:01 pm      Отговорете с цитат


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
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 07/11/2017 4:13 pm      Отговорете с цитат


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

Регистриран на: 13/05/2016 2:29 pm

Support: 5
Bonus: 10
Мнения: 246
Мнение 07/11/2017 6:24 pm      Отговорете с цитат


<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
Активен
Активен

Регистриран на: 25/12/2012 12:03 pm

Support: 124
Bonus: 248
Мнения: 763
Мнение 07/11/2017 9:11 pm      Отговорете с цитат


Колега, ако ползваш само 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">


Пробвай и дай фийдбак, трябва всичко да е наред Smile
Idea Question
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 08/11/2017 1:16 pm      Отговорете с цитат


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

Регистриран на: 13/05/2016 2:29 pm

Support: 5
Bonus: 10
Мнения: 246
Мнение 08/11/2017 1:43 pm      Отговорете с цитат


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

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 10/11/2017 11:01 am      Отговорете с цитат


Благодаря.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети