|
Автор |
Съобщение |
Редовен
Регистриран на: 18/02/2010 1:50 pm
Support:
Bonus: 178
Мнения: 1750
|
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 зелен, но се визуализира само червен. Какво трябва да направя за да бъдат нещата както трябва?
|
|
Върнете се в началото |
|
|
Нов
Регистриран на: 29/08/2017 2:35 pm
Support:
Bonus: 6
Мнения: 32
|
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/ |
|
Върнете се в началото |
|
|
Турист
Регистриран на: 13/05/2016 2:29 pm
Support:
Bonus: 10
Мнения: 335
|
07/11/2017 2:48 pm
|
|
|
max-width се отнася до тези 300 писекла до max-width: 300px; тоест е горната граница. min-width се отнася че до долната граница пример min-width: 300px; се показва елемент под 300 пиксела ще се криеш примерно #rd { display: block; } Примерно под мобилна не искаш да се вижда #rd и така  @media (min-width: 361px) { #rd { display: none; } } Той човека го е написал добре по-горе! Успех! |
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 18/02/2010 1:50 pm
Support:
Bonus: 178
Мнения: 1750
|
07/11/2017 3:38 pm
|
|
|
Не знам защо, но при мен се получават бъгове по-този начин. @n641951363 би ли дал пример с повече големини. На мен ми трябва точно до 320 пиксела, след това от 320 до 360, до375, до411, до 414 и т.н. В смисъл дизайна на всяка една от тези големини се различава по-нещо от предходния.
|
|
Върнете се в началото |
|
|
Нов
Регистриран на: 29/06/2015 9:28 am
Support:
Bonus: 4
Мнения: 76
|
|
Върнете се в началото |
|
|
Нов
Регистриран на: 29/08/2017 2:35 pm
Support:
Bonus: 6
Мнения: 32
|
07/11/2017 4:01 pm
|
|
|
teroristd написа: | Не знам защо, но при мен се получават бъгове по-този начин. @n641951363 би ли дал пример с повече големини. На мен ми трябва точно до 320 пиксела, след това от 320 до 360, до375, до411, до 414 и т.н. В смисъл дизайна на всяка една от тези големини се различава по-нещо от предходния. |
https://jsfiddle.net/zxy9e9g1/1/
по-важен е viewport от резолюцията за пример аз съм с Samsung S8+ който е 4K но viewport-а е 414px под chrome и 412px под firefox |
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 18/02/2010 1:50 pm
Support:
Bonus: 178
Мнения: 1750
|
07/11/2017 4:13 pm
|
|
|
Има всякакви телефони и стари и нови и не всички са HD да не говорим за Full HD. Също така трябва да се има предвид че телефона може да се гледа вертикално и хоризонтално.
|
|
Върнете се в началото |
|
|
Турист
Регистриран на: 13/05/2016 2:29 pm
Support:
Bonus: 10
Мнения: 335
|
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">
потърси инфо за тези неща.
|
|
Върнете се в началото |
|
|
Активен
Регистриран на: 25/12/2012 12:03 pm
Support:
Bonus: 280
Мнения: 818
|
07/11/2017 9:11 pm
|
|
|
Колега, ако ползваш само Max-width или обратното .. ще стават презаписвания. От което ти май страдаш ;д Та решението е следнното .. сложи си viewport тага и респонсива си го отдели на отделен файл и го дефинирай СЛЕД като си дефинирал базовия стил. (или ако компресираш там всичко в един файл, гледай компресията на респонсива да е в края на файла) responsive.cssCSS 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">
|
Пробвай и дай фийдбак, трябва всичко да е наред  |
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 18/02/2010 1:50 pm
Support:
Bonus: 178
Мнения: 1750
|
08/11/2017 1:16 pm
|
|
|
Благодаря ви за отговорите. Оказва се че главният стил прави поразиите, така че трябва да внимавам какво точно съм писал  . Иначе почнах да ползвам min-max както предложи @n641951363 и всичко сработва за сега. Изникна ми и едно питане. Трябва ли да имам главен css или всичко може да бъде медия? |
|
Върнете се в началото |
|
|
Турист
Регистриран на: 13/05/2016 2:29 pm
Support:
Bonus: 10
Мнения: 335
|
08/11/2017 1:43 pm
|
|
|
Разбира се че ще прави  , тогава идва един случай на !important което е лошо защото правиш на таблет width:20% !important; и по мобилен хващаш долният  и почваш едни min-width: 20%; става мазалак  от скоро се занимавам със уеб и е голяма шитня не е като дескстопа макар че едно и също. |
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 18/02/2010 1:50 pm
Support:
Bonus: 178
Мнения: 1750
|
10/11/2017 11:01 am
|
|
|
Благодаря.
|
|
Върнете се в началото |
|
|
|