Loading...
petrovamariya avatar petrovamariya 1 Точки

Responsive Design

Здравейте, някой, който е направил  домашното за responsive design, може ли да сподели как трябва да стане, или поне да даде насоки за изпълнението му? В проблем 1 съм разделила медиите на 3, според изискванията в задачата:

@media only screen and (max width:960 and min-width:780){},

@media only screen and (max width:780 and min-width:640){},

@media only screen and (max width:640){},

но не ми е ясно, кои елементи трябва да се опишат и как. Аналогично на проблем 1 съм задала и медиите, в проблем 2.

Тагове:
0
Web Fundamentals - HTML5
bobekabg avatar bobekabg 30 Точки

Ако си оправила стиловете на страницата да изглеждат като на снимката, за responsive частта ти остава да добавиш нещо подобно:

 

#wrapper {
	width: 960px;
	margin: 0 auto;
}
section {
    float: left;
    width: 70%;
}
aside {
    float: left;
    width: 30%;
}
footer {
    float: left
}
aside:after, section:after {
	content: '';
    display: block;
    clear: both;
}

@media only screen and (max-width: 960px){
	#wrapper {
		width: 100%;
	}
}
@media only screen and (max-width: 780px) {
	section, aside {
		width: 100%;
	}
}
@media only screen and (max-width: 640px) {
	#header {
		display: block;
		text-align: center
	}
}

Като #header id-то съм го добавил на заглавието, за да може когато екрана стане по-малък от 640px да слезе на нов ред и да е посредата :)

0
26/09/2016 17:34:45
z.s.paneva avatar z.s.paneva 21 Точки

Здравей! :)  Ще споделя моя опит без претенции, че това е най-правилният начин. Смятам, че това задаване на конкретен интервал (като max width:960 and min-width:780) не е много добра идея. Причина - защото така всяка следваща заявка няма да взема никакви правила от по-горната, а ще прилага базово това, което ти е в основния CSS и вече новото, което ще напишеш в самата нея. Това може да доведе до писането на едно си също правило няколко пъти в няколко поредни заявки. Аз подреждам заявките така, използвайки само max-width: 

@media screen and (max-width: 960px) {

.........

}

@media screen and (max-width: 780px) {

.........

}

@media screen and (max-width: 640px) {

.........

}

Когато използваш max-width, е много важно да подреждаш заявките в низходящ ред по стойност на резолюцията. Ако започнеш от по-малките стойности (640px в случая и продължиш с 780, след което 960) и използвайки max-width, ще стане пълна каша, защото всяка следващата заявка ще презаписва правилата от предходната, тъй като примерно в условието max-width: 780px попадат всички размери на екрана, по-малки от 780, включително 640 и по-надолу. 

Ако използваш min-width, правилото е точно обратното (започваш да пишеш заявките от по-малките резолюции (в случая 640) и нататък продължаваш във възходящ ред, поради същите причини. :)

Относно описването на елементите - описваш тези, които се променят от една резолюция в друга (изображенията в ресурсите показват тези промени). Ето пример как съм стилизирала менюто при най-малката резолюция: 

@media screen and (max-width: 640px) {
 
  nav {
    width: 93.2%;
    margin-left: 1%;
    margin-top: 26px;
  }
  nav ul {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  nav ul li {
    width: 100%;
    display: block;
  }

1
26/09/2016 18:48:54
Kiril555 avatar Kiril555 4 Точки

Аз цял ден си играя със респонсив домашното и горе-долу го направих както трябва. Така както ти си го написала е ок, просто сега почваш в скобите на всяка резолюция да пишеш css така, както искаш да изглежда сайта при тази резолюция. Аз използвах float, positiion, margin и т.н. Експериментирай със инспектора на браузъра си, като го пуснеш на mobile view (май така беше).

0
Ivokin avatar Ivokin 2 Точки

Здравей ,сега правя 3-та задача за първата и втората трябва да знаеш следното пишеш си css както обикновено после създаваш медиите и в тях вкарваш само елементите които искаш да промениш например article го искаш на целия екран когато екрана е голям до 960 пиксела значи   :

 section > article {
        width: 100%;
    }

нз колко е добро обяснението ми но качих тук ако искаш го разгледай https://github.com/Ivokin/SoftUni/tree/master

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.