{"id":650,"date":"2015-06-01T09:11:01","date_gmt":"2015-06-01T09:11:01","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=650"},"modified":"2016-09-30T08:37:08","modified_gmt":"2016-09-30T08:37:08","slug":"statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/","title":{"rendered":"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad – Jaka Jest R\u00f3\u017cnica?"},"content":{"rendered":"

Dzi\u015b web projektanci cz\u0119sto u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny, adaptacyjny, responsywny itd. Je\u015bli jeste\u015b web projektantem, web developerem, czy mened\u017cerem projektu lub klientem, jest bardzo wa\u017cne aby wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego typu uk\u0142adu.<\/p>\n

W zale\u017cno\u015bci od poziomej szeroko\u015bci okna szeroko\u015b\u0107 przegl\u0105darki mo\u017ce si\u0119 zmienia\u0107, poniewa\u017c strona www jest ogl\u0105dana z r\u00f3\u017cnych urz\u0105dze\u0144 (telefon\u00f3w kom\u00f3rkowych, tablet\u00f3w, komputer\u00f3w stacjonarnych, itd), u\u017cytkownik strony mo\u017ce po prostu zmieni\u0107 rozmiar okna przegl\u0105darki na urz\u0105dzeniu stacjonarnym, lub u\u017cytkownik mo\u017ce zmieni\u0107 re\u017cim telefonu z pionowego na poziomy, itd. Najpierw te poj\u0119cia mog\u0105 by\u0107 trudne do zrozumienia, poniewa\u017c s\u0105 one \u015bci\u015ble powi\u0105zane mi\u0119dzy sob\u0105. Zrozumienie r\u00f3\u017cnicy pomi\u0119dzy ka\u017cdym z nich jest kluczem do zrozumienia ich dzialania.<\/p>\n

Statyczny Uk\u0142ad Strony<\/h3>\n

Statyczny uk\u0142ad strony (czasami nazywany \"sta\u0142y\" uk\u0142ad lub \"ze sta\u0142\u0105 szeroko\u015bci\u0105\") wykorzystuje predefiniowany rozmiar strony i nie zmienia si\u0119 w zale\u017cno\u015bci od szeroko\u015bci okna przegl\u0105darki. Inaczej m\u0105wi\u0105c, uk\u0142ad strony mo\u017ce mie\u0107 sta\u0142\u0105 szeroko\u015b\u0107 960 pikseli, b\u0119z wzg\u0142\u0105du na wszystko. W ten spos\u00f3b strony internetowe by\u0142y tradycyjnie budowane przez wiele lat, a\u017c nowoczesne wp\u0142ywy, takie jak zapytania no\u015bnik\u00f3w i responsywny design zosta\u0142y wprowadzone na pocz\u0105tku 2010.<\/p>\n

R\u00f3\u017cne urz\u0105dzenia b\u0119d\u0105 traktowa\u0107 statyczny uk\u0142ad strony na r\u00f3\u017cne sposoby, wi\u0119c wyg\u0142\u0105d wygenerowanej strona mo\u017ce by\u0107 nieco nieprzewidywalny. Na przyk\u0142ad w przegl\u0105darce komputerowej, je\u015bli okno jest zbyt ma\u0142e w poziomie, to strona zostanie odci\u0119ta i b\u0119zie wy\u015bwietlana z poziomym paskiem przewijania. Na urz\u0105dzeniu przeno\u015bnym, jak iPhone, strona zostanie automatycznie skalowana, pozwalaj\u0105c u\u017cytkownikowi powi\u0119kszy\u0107 punkty zainteresowania.<\/p>\n

Podzczas tworzenia nowych stron internetowych taki uk\u0142ad nie jest preferowany, poniewa\u017c oznacza to, \u017ce b\u0119dzie potrzeba oddzielna strona dla urz\u0105dzie\u0144 przeno\u015bnych. Ale istniej\u0105 wyj\u0105tki takie jak online sklep Apple.com<\/a>, ale jest to wyj\u0105tkowy przypadek, poniewa\u017c jest to takzw selling point ich urz\u0105dze\u0144 mobilnych, \u017ce mo\u017cna je zobaczy\u0107 jako uk\u0142ady statyczne.<\/p>\n

Sprawd\u017a podgl\u0105d, aby zrozumie\u0107 r\u00f3\u017cnic\u0119. Nie zapominaj tak\u017ce, aby zmieni\u0107 rozmiar przegl\u0105darki.<\/p>\n

HTML<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n<\/pre>\n<\/td>\n
\n
<<\/span>div class<\/span>=<\/span>\"wrapper\"<\/span>><\/span>\r\n  <<\/span>h1><\/span>Przyklad Stytycznego Uk\u0142du<\/<\/span>h1><\/span>\r\n  <<\/span>header><\/span>Nagl\u00f3wek<\/<\/span>header><\/span>\r\n  <<\/span>nav><\/span>Nav<\/<\/span>nav><\/span>\r\n  <<\/span>section><\/span>Sekcja<\/<\/span>section><\/span>\r\n<\/<\/span>div><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
CSS<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n<\/pre>\n<\/td>\n
\n
\u00a0\r\n\/**************************************\r\nAutor : Faisal Russel\r\nCSS STATYCZNEGO UK\u0141ADU\r\n**************************************\/<\/span>\r\n\u00a0\r\n.<\/span>wrapper {<\/span>\r\n  width:<\/span> 960px;<\/span>\r\n  margin:<\/span> 0<\/span> auto;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span> {<\/span>\r\n\twidth:<\/span> 960px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav,<\/span> section {<\/span>\r\n  float:<\/span> left;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav {<\/span>\r\n  width:<\/span> 200px;<\/span>\r\n  margin-<\/span>right:<\/span> 10px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nsection {<\/span>\r\n  width:<\/span> 750px;<\/span>\r\n}<\/span>\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\/**************************************\r\nCSS ABY PRZYK\u0141AD MIA\u0141 LEPSZY WYGL\u0104D\r\n**************************************\/<\/span>\r\n\u00a0\r\n*,<\/span> *:<\/span>before,<\/span> *:<\/span>after {<\/span>\r\n  -<\/span>moz-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  -<\/span>webkit-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n}<\/span>\r\n\u00a0\r\nbody {<\/span>\r\n  background:<\/span> #000;\r\n<\/span>  color:<\/span> #FFF;\r\n<\/span>  font-<\/span>family:<\/span> Helvetica;<\/span>\r\n  text-<\/span>align:<\/span> center;<\/span>\r\n  margin:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span>,<\/span>\r\nnav,<\/span>\r\nsection {<\/span>\r\n  border:<\/span> 1px solid rgba(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>0.8<\/span>)<\/span>;<\/span>\r\n  margin-<\/span>bottom:<\/span> 10px;<\/span>\r\n  border-<\/span>radius:<\/span> 3px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span> {<\/span>\r\n  padding:<\/span> 20px 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav,<\/span> section {<\/span>\r\n  padding:<\/span> 200px 0<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Statyczny Uk\u0142ad Strony \u2013 Demo<\/a><\/p>\n
Liquidny Uk\u0142ad Strony<\/h3>\n
Liquidny uk\u0142ad strony (czasami nazywany \"p\u0142yny\" lub \"z p\u0142ynn\u0105 szeroko\u015bci\u0105\") u\u017cywa wzgl\u0119dnych jednostek zamiast jednostek sta\u0142ych. Liquidny uk\u0142ad b\u0119dzie wykorzystywa\u0142 procenty zamiast pikseli, ale ka\u017cda wzgl\u0119dna jednostka miary b\u0119dzie dzia\u0142a\u0107, tak jak EMS.<\/p>\n
Liquidny uk\u0142ad wype\u0142ni szeroko\u015bci strony, bez wzgl\u0119du na to, jak\u0105 mo\u017ce by\u0107 szeroko\u015b\u0107 przegl\u0105drki. P\u0142ynne uk\u0142ady maj\u0105 pewne wady przy bardzo du\u017cych lub bardzo ma\u0142ych szeroko\u015bciach przegl\u0105darki. Je\u015bli przegl\u0105darka jest bardzo szeroka, niekt\u00f3re tre\u015bci mog\u0105 by\u0107 rozci\u0105gane za daleko. Na du\u017cych ekranach, pojedynczy akapit mo\u017ce dzia\u0142a\u0107 na ca\u0142ej stronie w jednej linii. Odwrotnie, uk\u0142ad wielu kolumny na ma\u0142ym ekranie mo\u017ce by\u0107 zbyt przepelniony zawarto\u015bci\u0105.<\/p>\n
HTML<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n<\/pre>\n<\/td>\n
\n
<<\/span>div class<\/span>=<\/span>\"wrapper\"<\/span>><\/span>\r\n  <<\/span>h1><\/span>Przyk\u0142ad Liquidnego Uk\u0142adu<\/<\/span>h1><\/span>\r\n  <<\/span>header><\/span>Nagl\u00f3wek<\/<\/span>header><\/span>\r\n  <<\/span>nav><\/span>Nav<\/<\/span>nav><\/span>\r\n  <<\/span>section><\/span>Sekcja<\/<\/span>section><\/span>\r\n<\/<\/span>div><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
CSS<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n<\/pre>\n<\/td>\n
\n
\/**************************************\r\nAutor : Faisal Russel\r\nCSS LIQUIDNEGO UK\u0141ADU\r\n**************************************\/<\/span>\r\n\u00a0\r\n.<\/span>wrapper {<\/span>\r\n  width:<\/span> 100<\/span>%;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav,<\/span> section {<\/span>\r\n  float:<\/span> left;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav {<\/span>\r\n  width:<\/span> 20.83333<\/span>%;<\/span>\r\n  margin-<\/span>right:<\/span> 1.041667<\/span>%;<\/span>\r\n}<\/span>\r\n\u00a0\r\nsection {<\/span>\r\n  width:<\/span> 78.125<\/span>%;<\/span>\r\n}<\/span>\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\/**************************************\r\nCSS ABY PRZYK\u0141AD MIA\u0141 LEPSZY WYGL\u0104D\r\n**************************************\/<\/span>\r\n\u00a0\r\n*,<\/span> *:<\/span>before,<\/span> *:<\/span>after {<\/span>\r\n  -<\/span>moz-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  -<\/span>webkit-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n}<\/span>\r\n\u00a0\r\nbody {<\/span>\r\n  background:<\/span> #000;\r\n<\/span>  color:<\/span> #FFF;\r\n<\/span>  font-<\/span>family:<\/span> Helvetica;<\/span>\r\n  text-<\/span>align:<\/span> center;<\/span>\r\n  margin:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span>,<\/span>\r\nnav,<\/span>\r\nsection {<\/span>\r\n  border:<\/span> 1px solid rgba(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>0.8<\/span>)<\/span>;<\/span>\r\n  margin-<\/span>bottom:<\/span> 10px;<\/span>\r\n  border-<\/span>radius:<\/span> 3px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span> {<\/span>\r\n  padding:<\/span> 20px 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav,<\/span> section {<\/span>\r\n  padding:<\/span> 200px 0<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Sprawd\u017a podgl\u0105d, aby zrozumie\u0107 r\u00f3\u017cnic\u0119. Nie zapominaj tak\u017ce, aby zmieni\u0107 rozmiar przegl\u0105darki.<\/p>\n
 Liquidny Uk\u0142ad Strony \u2013 Demo<\/a><\/p>\n
Adapcyjny\u00a0Uk\u0142ad Strony<\/h3>\n
Adaptacyjny uk\u0142ad strony u\u017cywa CSS zapyta\u0144 no\u015bnik\u00f3w do wykrywania szeroko\u015bci przegl\u0105darki i odpowiedniej zmiany uk\u0142adu. Adaptacyjny uk\u0142ady, jaki i uk\u0142ad statyczny, u\u017cywa pikseli jako sta\u0142\u0105 jednostk\u0119, ale nie ma w zasadzie wiele szeroko\u015bci sta\u0142e okre\u015blonych przez konkretne zapytania no\u015bnik\u00f3w.<\/p>\n
Zapytanie no\u015bnika jest wyrazem logiki, a gdy jest u\u017cywane w po\u0142\u0105czeniu z zapytaniami innych no\u015bnik\u00f3w, tworz\u0105 podstawowy algorytm. Tak na przyk\u0142ad, adaptacyjny uk\u0142ad strony mo\u017ce powiedzie\u0107 co\u015b w stylu: \"Je\u015bli szeroko\u015b\u0107 przegl\u0105darki jest 500 pikseli, trzeba ustawi\u0107 aby g\u0142\u00f3wny pojemnik zawarto\u015bci by\u0142 400 pikseli. \u00a0Je\u017celi przegl\u0105darka ma szeroko\u015b\u0107 1000 pikseli, trzeba ustawi\u0107 aby g\u0142\u00f3wny pojemnik zawarto\u015bci by\u0142 960 pikseli. \"Poza g\u0142\u00f3wnym pojemnikiem zawarto\u015bci inne cz\u0119\u015bci strony mog\u0105 zmienia\u0107 si\u0119 w szeroko\u015bci, zmienia\u0107 swoje miejsce lub by\u0107 usuni\u0119te. Na przyk\u0142ad, 2-kolumny uk\u0142ad mo\u017ce zmieni\u0107 si\u0119 w 1-kolumny uk\u0142ad, gdy przegl\u0105darka jest zbyt w\u0105ska.<\/p>\n
Adaptacyjny uk\u0142ad -- to dobre rozwi\u0105zanie gdy statyczny uk\u0142ad musi by\u0107 skonwertowany do obs\u0142ugi urz\u0105dze\u0144 mobilnych. R\u00f3wnie\u017c wymaga mniej czasu na rozw\u00f3j ni\u017c responsywny uk\u0142ad. G\u0142\u00f3wn\u0105 wad\u0105 jest to, \u017ce szeroko\u015b\u0107 urz\u0105dzenia i jawne warto\u015bci graniczne s\u0105 cz\u0119sto dalekie od idea\u0142u, maj\u0105c albo zbyt du\u017co miejsca lub nie wystarczaj\u0105co miejsca.<\/p>\n
Sprawd\u017a podgl\u0105d, aby zrozumie\u0107 r\u00f3\u017cnic\u0119. Nie zapominaj tak\u017ce, aby zmieni\u0107 rozmiar przegl\u0105darki.<\/p>\n
HTML<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n<\/pre>\n<\/td>\n
\n
<<\/span>div class<\/span>=<\/span>\"wrapper\"<\/span>><\/span>\r\n  <<\/span>h1><\/span>Przyk\u0142ad Adapcyjnego Uk\u0142adu<\/<\/span>h1><\/span>\r\n  <<\/span>header><\/span>HEADER<\/<\/span>Nagl\u00f3wek><\/span>\r\n  <<\/span>nav><\/span>NAV<\/<\/span>Nav><\/span>\r\n  <<\/span>section><\/span>SECTION<\/<\/span>Sekcja><\/span>\r\n<\/<\/span>div><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
CSS<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64\r\n65\r\n66\r\n67\r\n68\r\n69\r\n70\r\n71\r\n72\r\n73\r\n74\r\n75\r\n76\r\n77\r\n78\r\n79\r\n80\r\n81\r\n82\r\n83\r\n84\r\n85\r\n86\r\n87\r\n88\r\n89\r\n90\r\n91\r\n92\r\n93\r\n94\r\n95\r\n96\r\n97\r\n98\r\n99\r\n100\r\n101\r\n102\r\n103\r\n<\/pre>\n<\/td>\n
\n
\/**************************************\r\nAutor : Faisal Russel\r\nCSS ADAPCYJNEGO UK\u0141ADU\r\n**************************************\/<\/span>\r\n\u00a0\r\n.<\/span>wrapper {<\/span>\r\n  width:<\/span> 400px;<\/span>\r\n  margin:<\/span> 0<\/span> auto;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span> {<\/span>\r\n\twidth:<\/span> 400px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav {<\/span>\r\n  width:<\/span> 400px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nsection {<\/span>\r\n  width:<\/span> 400px;<\/span>\r\n}<\/span>\r\n\u00a0\r\n@<\/span>media screen and (<\/span>min-<\/span>width:<\/span> 800px)<\/span> {<\/span>\r\n\u00a0\r\n  .<\/span>wrapper {<\/span>\r\n    width:<\/span> 640px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  header<\/span> {<\/span>\r\n    width:<\/span> 640px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  nav,<\/span> section {<\/span>\r\n    float:<\/span> left;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  nav {<\/span>\r\n    width:<\/span> 133px;<\/span>\r\n    margin-<\/span>right:<\/span> 10px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  section {<\/span>\r\n    width:<\/span> 497px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n}<\/span>\r\n\u00a0\r\n\u00a0\r\n@<\/span>media screen and (<\/span>min-<\/span>width:<\/span> 1000px)<\/span> {<\/span>\r\n\u00a0\r\n  .<\/span>wrapper {<\/span>\r\n    width:<\/span> 960px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  header<\/span> {<\/span>\r\n    width:<\/span> 960px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  nav {<\/span>\r\n    width:<\/span> 200px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  section {<\/span>\r\n    width:<\/span> 750px;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n}<\/span>\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\/**************************************\r\nCSS ABY PRZYK\u0141AD MIA\u0141 LEPSZY WYGL\u0104D\r\n**************************************\/<\/span>\r\n\u00a0\r\n*,<\/span> *:<\/span>before,<\/span> *:<\/span>after {<\/span>\r\n  -<\/span>moz-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  -<\/span>webkit-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n}<\/span>\r\n\u00a0\r\nbody {<\/span>\r\n  background:<\/span> #000;\r\n<\/span>  color:<\/span> #FFF;\r\n<\/span>  font-<\/span>family:<\/span> Helvetica;<\/span>\r\n  text-<\/span>align:<\/span> center;<\/span>\r\n  margin:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span>,<\/span>\r\nnav,<\/span>\r\nsection {<\/span>\r\n  border:<\/span> 1px solid rgba(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>0.8<\/span>)<\/span>;<\/span>\r\n  margin-<\/span>bottom:<\/span> 10px;<\/span>\r\n  border-<\/span>radius:<\/span> 3px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span> {<\/span>\r\n  padding:<\/span> 20px 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav,<\/span> section {<\/span>\r\n  padding:<\/span> 200px 0<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Adapcyjny Uk\u0142ad Strony \u2013 Demo<\/a><\/p>\n
Responsywny Uk\u0142ad Strony<\/h3>\n
Responsywny uk\u0142ad strony u\u017cywa jednostki wzgl\u0119dne i zapytania no\u015bnk\u00f3w, \u0142\u0105cz\u0105c idee liquidnego i adaptacyjnego uk\u0142ad\u00f3w. Z rozszerzeniem przegl\u0105darki lub zmniejszeniem jej szeroko\u015bci, responsywny uk\u0142ad b\u0119dzie zmienia\u0142 si\u0119 jak liquidny uk\u0142ad. Ale je\u015bli przegl\u0105darka wykracza poza pewn\u0105 szeroko\u015bci\u0105 oke\u015blion\u0105 przerwaniami zapyta\u0144 no\u015bnika, taki uk\u0142ad b\u0119dzie szybciej si\u0119 zmienia\u0142 aby dostosowa\u0107 si\u0119 do szeroko\u015bci okna.<\/p>\n
Zazwyczaj responsywne designy s\u0105 tworzone za pomoc\u0105 podej\u015bcia mobile-first. To znaczy, \u017ce najpierw<\/em> jest stworzony uk\u0142ad kom\u00f3rkowy, a potem, jak przegl\u0105darka staje si\u0119 szersz\u0105 na desktopie lub tablecie, projektant szuka sposoby, aby rozszerzy\u0107 ten uk\u0142ad. Prowadzi to do stworzenia lepszych do\u015bwiadcze\u0144 og\u00f3lnie, poniewa\u017c \u0142atwiej rozszerzy\u0107 projekt, ni\u017c upro\u015bci\u0107 du\u017cy uk\u0142ad dla ekran\u00f3w telefon\u00f3w.<\/p>\n
Sprawd\u017a podgl\u0105d, aby zrozumie\u0107 r\u00f3\u017cnic\u0119. Nie zapominaj tak\u017ce, aby zmieni\u0107 rozmiar przegl\u0105darki.<\/p>\n
HTML<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n<\/pre>\n<\/td>\n
\n
<<\/span>div class<\/span>=<\/span>\"wrapper\"<\/span>><\/span>\r\n  <<\/span>h1><\/span>Przyk\u0142ad Responsywnego Uk\u0142adu<\/<\/span>h1><\/span>\r\n  <<\/span>header><\/span>Nagl\u00f3wek<\/<\/span>header><\/span>\r\n  <<\/span>nav><\/span>Nav<\/<\/span>nav><\/span>\r\n  <<\/span>section><\/span>Sekcja<\/<\/span>section><\/span>\r\n<\/<\/span>div><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
CSS<\/h3>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64\r\n65\r\n66\r\n67\r\n68\r\n69\r\n70\r\n71\r\n72\r\n73\r\n74\r\n75\r\n76\r\n77\r\n78\r\n79\r\n<\/pre>\n<\/td>\n
\n
\/**************************************\r\nAutor : Faisal Russel\r\nRESPONSYWNY UK\u0141AD STRONY\r\n**************************************\/<\/span>\r\n\u00a0\r\n.<\/span>wrapper {<\/span>\r\n  max-<\/span>width:<\/span> 100<\/span>%;<\/span>\r\n  margin:<\/span> 0<\/span> auto;<\/span>\r\n}<\/span>\r\n\u00a0\r\n@<\/span>media screen and (<\/span>min-<\/span>width:<\/span> 800px)<\/span> {<\/span>\r\n\u00a0\r\n  .<\/span>wrapper {<\/span>\r\n    max-<\/span>width:<\/span> 90<\/span>%;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  header<\/span> {<\/span>\r\n    width:<\/span> 100<\/span>%;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  nav,<\/span> section {<\/span>\r\n    float:<\/span> left;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  nav {<\/span>\r\n    width:<\/span> 20.83333<\/span>%;<\/span>\r\n    margin-<\/span>right:<\/span> 1.041667<\/span>%;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n  section {<\/span>\r\n    width:<\/span> 78.125<\/span>%;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n}<\/span>\r\n\u00a0\r\n\u00a0\r\n@<\/span>media screen and (<\/span>min-<\/span>width:<\/span> 1000px)<\/span> {<\/span>\r\n\u00a0\r\n  .<\/span>wrapper {<\/span>\r\n    max-<\/span>width:<\/span> 66.66667<\/span>%;<\/span>\r\n  }<\/span>\r\n\u00a0\r\n}<\/span>\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\/**************************************\r\nCSS ABY PRZYK\u0141AD MIA\u0141 LEPSZY WYGL\u0104D\r\n**************************************\/<\/span>\r\n\u00a0\r\n*,<\/span> *:<\/span>before,<\/span> *:<\/span>after {<\/span>\r\n  -<\/span>moz-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  -<\/span>webkit-<\/span>box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n  box-<\/span>sizing:<\/span> border-<\/span>box;<\/span>\r\n}<\/span>\r\n\u00a0\r\nbody {<\/span>\r\n  background:<\/span> #000;\r\n<\/span>  color:<\/span> #FFF;\r\n<\/span>  font-<\/span>family:<\/span> Helvetica;<\/span>\r\n  text-<\/span>align:<\/span> center;<\/span>\r\n  margin:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span>,<\/span>\r\nnav,<\/span>\r\nsection {<\/span>\r\n  border:<\/span> 1px solid rgba(<\/span>255<\/span>,<\/span>255<\/span>,<\/span>255<\/span>,<\/span>0.8<\/span>)<\/span>;<\/span>\r\n  margin-<\/span>bottom:<\/span> 10px;<\/span>\r\n  border-<\/span>radius:<\/span> 3px;<\/span>\r\n}<\/span>\r\n\u00a0\r\nheader<\/span> {<\/span>\r\n  padding:<\/span> 20px 0<\/span>;<\/span>\r\n}<\/span>\r\n\u00a0\r\nnav,<\/span> section {<\/span>\r\n  padding:<\/span> 200px 0<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
 Responsywny Uk\u0142ad Strony \u2013 Demo<\/a><\/p>\n
* * *<\/p>\n
Ten artyku\u0142 zosta\u0142 przet\u0142umaczony z angielskiego. Orygina\u0142 mo\u017cna znale\u017a\u0107 tutaj: What\u2019s the Difference Between Static, Liquid, Adaptive and Responsive?<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Dzi\u015b web projektanci cz\u0119sto u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny, adaptacyjny, responsywny itd. Je\u015bli jeste\u015b web projektantem, web developerem, czy mened\u017cerem projektu lub klientem, jest bardzo wa\u017cne aby wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego typu uk\u0142adu. W zale\u017cno\u015bci od poziomej szeroko\u015bci okna szeroko\u015b\u0107 przegl\u0105darki mo\u017ce si\u0119 zmienia\u0107, poniewa\u017c strona […]<\/p>\n","protected":false},"author":2098093,"featured_media":651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[48,136],"tags":[25,75],"yoast_head":"\nStatyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad<\/title>\n<meta name=\"description\" content=\"Web projektanci u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny itd. Trzeba wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego uk\u0142adu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad\" \/>\n<meta property=\"og:description\" content=\"Web projektanci u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny itd. Trzeba wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego uk\u0142adu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/\" \/>\n<meta property=\"og:site_name\" content=\"Polski Blog TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-01T09:11:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-09-30T08:37:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2015\/06\/responsive_adaptive_static_liquid-900x538.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Katarzyna Paw\u0142owska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katarzyna Paw\u0142owska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/\"},\"author\":{\"name\":\"Katarzyna Paw\u0142owska\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\"},\"headline\":\"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad – Jaka Jest R\u00f3\u017cnica?\",\"datePublished\":\"2015-06-01T09:11:01+00:00\",\"dateModified\":\"2016-09-30T08:37:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/\"},\"wordCount\":1022,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"keywords\":[\"HTML5\",\"Tworzenie stron internetowych\"],\"articleSection\":[\"Artyku\u0142y\",\"Tworzenie stron internetowych\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/\",\"name\":\"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\"},\"datePublished\":\"2015-06-01T09:11:01+00:00\",\"dateModified\":\"2016-09-30T08:37:08+00:00\",\"description\":\"Web projektanci u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny itd. Trzeba wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego uk\u0142adu.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad – Jaka Jest R\u00f3\u017cnica?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"name\":\"Polski Blog TemplateMonster\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\",\"name\":\"MonsterPost Polska\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Polska\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/templatemonster_pl\/\",\"https:\/\/www.pinterest.com\/TM_Polska\/\",\"https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ\",\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\",\"https:\/\/twitter.com\/TM_Polska\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\",\"name\":\"Katarzyna Paw\u0142owska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Katarzyna Paw\u0142owska\"},\"description\":\"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.\",\"url\":\"https:\/\/monsterspost.com\/pl\/author\/katrina\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad","description":"Web projektanci u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny itd. Trzeba wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego uk\u0142adu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/","og_locale":"pl_PL","og_type":"article","og_title":"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad","og_description":"Web projektanci u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny itd. Trzeba wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego uk\u0142adu.","og_url":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/","og_site_name":"Polski Blog TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.Poland\/","article_published_time":"2015-06-01T09:11:01+00:00","article_modified_time":"2016-09-30T08:37:08+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2015\/06\/responsive_adaptive_static_liquid-900x538.jpg","type":"image\/jpeg"}],"author":"Katarzyna Paw\u0142owska","twitter_card":"summary_large_image","twitter_creator":"@TM_Polska","twitter_site":"@TM_Polska","twitter_misc":{"Napisane przez":"Katarzyna Paw\u0142owska","Szacowany czas czytania":"7 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/"},"author":{"name":"Katarzyna Paw\u0142owska","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8"},"headline":"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad – Jaka Jest R\u00f3\u017cnica?","datePublished":"2015-06-01T09:11:01+00:00","dateModified":"2016-09-30T08:37:08+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/"},"wordCount":1022,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"keywords":["HTML5","Tworzenie stron internetowych"],"articleSection":["Artyku\u0142y","Tworzenie stron internetowych"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/","url":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/","name":"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/#website"},"datePublished":"2015-06-01T09:11:01+00:00","dateModified":"2016-09-30T08:37:08+00:00","description":"Web projektanci u\u017cywaj\u0105 okre\u015ble\u0144 takich jak statyczny uk\u0142ad, liquidny itd. Trzeba wiedzie\u0107 co oznaczaj\u0105 te terminy i kiedy korzysta si\u0119 z ka\u017cdego uk\u0142adu.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/pl\/statyczny-liquidny-adaptacyjny-i-responsywny-uklad-jaka-jest-roznica\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Statyczny, Liquidny, Adaptacyjny i Responsywny Uk\u0142ad – Jaka Jest R\u00f3\u017cnica?"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/pl\/#website","url":"https:\/\/monsterspost.com\/pl\/","name":"Polski Blog TemplateMonster","description":"","publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/pl\/#organization","name":"MonsterPost Polska","url":"https:\/\/monsterspost.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Polska"},"image":{"@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/templatemonster_pl\/","https:\/\/www.pinterest.com\/TM_Polska\/","https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ","https:\/\/www.facebook.com\/TemplateMonster.Poland\/","https:\/\/twitter.com\/TM_Polska"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8","name":"Katarzyna Paw\u0142owska","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Katarzyna Paw\u0142owska"},"description":"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.","url":"https:\/\/monsterspost.com\/pl\/author\/katrina\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/650"}],"collection":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/users\/2098093"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":4,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/650\/revisions"}],"predecessor-version":[{"id":2968,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/650\/revisions\/2968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media\/651"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media?parent=650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/categories?post=650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/tags?post=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}