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;
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.