Strona główna Styl życia Proste tworzenie strony z responsywnym układem

Proste tworzenie strony z responsywnym układem

1

Chciałbyś aby strona lekko dopasowywała się do rozmiarów różnych ekranów? Sprawdź ten tutorial na temat tworzenia stron z responsywnym układem.

Responsywność strony www obecnie jest standardem webowym. Ze względu na to, że Google źle widzi witryny nieresponsywne i nie cieszą się oni popularnością wśród internautów, większość właścicieli stron www tworzą swoje serwisy w oparciu o technologię responsywnego designu.

Do tworzenia takich stron często są wykorzystywane gotowe rozwiązania — różne frameworki, przygotowane właśnie pod witryny z responsywnym układem, lub gotowe responsywne szablony stron internetowych. I chociaż gotowe rozwiązania znacznie ułatwiają życie, nie zawsze są dobrym wyborem. Więc jeśli przyszła witryna będzie posiadała statyczne elementy i podstrony, najlepiej aby stworzyć własne style css i szablony HTML. oraz własne style css.

Więc z czego zacząć?

W naszym przypadku bardzo ważną jest struktura strony. Więc szczególną uwagę warto zwrócić na nią uwagę. Aby strona prawidłowo się skalowała należy w znaczniku head dodać następujący kod:

(<meta name=\”viewport\” content=\”width=device-width, initial-scale=1, maximum-scale=1\”>)

Dla responsywnych witryn najważniejszymi są style css. Właśnie oni zawierają cały układ witryny I odpowiadają za jej widoczność na różnych urządzeniach.

header.ewd_rd

{
  width:100%;
  min-height:80px;
  border-bottom:#444 2px solid;
  margin-bottom:10px;
}
#ewd_rd
{
  display:block;
  margin:0 auto;
}
ul.ewd_rd li
{
  list-style:none;
  float:lesft;
  margin-right:30px;
}
ul.ewd_rd li a
{
  color:#ddd;
  text-transform:uppercase;
  text-decoration:none;
  transition: all .5s easy-in-out;
}
ul.ewd_rd li a:hover
{
  color:#fce600
}
section.ewd_rd
{
  width:80%
  margin:0 auto;
}
header.ewd_major
{
  width:100%;
  background-image:url(„header-image2.jpg”)
  background-repeat:no-repeat;
  background-size:cover;
  min-height:250px;
  text-align:center;
  padding-top:40px;
  border-radius:0 0 10px 10px;
}
header.ewd_major h2
{
  color:#fff;
  font-size:35px;
  font-style:lighter;
}

Aby przyszła sкtona poprawnie się dostosowywała do różnych rozmiarów ekranów należy odpowiednio połączyć klasy ze znaczników HTML. To oznacza, że widok siatki powinien posiadać w stylach css odpowiednie klasy i konstrukcję.

Dla mojej strony są to elementy, które posiadają klasę ewd_rd-1-2, a ponad nimi znajduje się sekcja section. Taki układ koniecznie musi mieć właściwe style. Dla sekcji są wymagane takie pozycje jak:

section.content:after
{
  clear:both;
  content:’ ’;
  display:block;
}

A dla klasy wymagane są:

width:45%;
  float:left;

REKLAMA
Subskrybuj
Powiadom o
1 Komentarz
najstarszy
najnowszy
Inline Feedbacks
View all comments

Czy ktoś czytał ten tekst przed publikacją? Zdaje się, że nie. To się czyta gorzej niż raport Macierewicza. Co drugie zdanie zawiera błędy gramatyczne, logiczne, literówki, powtórzenia, a nawet błędy ortograficzne.
Nie będąc ani polonistą ani maniakiem naszego języka stwierdzam, że ciężko się to czyta. A zatem mogę to skomentować tylko jednym słowem.
Tragedia.