Tinklalapio pločio nustatymas

click fraud protection

Pirmas dalykas, į kurį dauguma dizainerių atsižvelgia kurdami savo internetinį puslapį, yra kas rezoliucija kurti. Tai, ką iš tikrųjų reiškia, yra sprendimas, koks turėtų būti jūsų dizainas. Nebėra tokio dalyko kaip standartinis svetainės plotis.

Kodėl verta apsvarstyti rezoliuciją

1995 m. Standartiniai 640 x 480 pikselių monitoriai buvo didžiausi ir geriausi prieinami monitoriai. Tai reiškė, kad interneto dizaineriai sutelkė dėmesį į tai, kad puslapiai, kurie gerai atrodytų žiniatinklio naršyklėse, būtų maksimaliai padidinti 12–14 colių ekrane esant tokiai raiškai.

Šiomis dienomis 640 x 480 skiriamoji geba sudaro mažiau nei 1 procentą didžiausio interneto srauto. Žmonės naudoja daug didesnės skiriamosios gebos kompiuterius, įskaitant 1366 x 768, 1600 x 900 ir 5120 x 2880. Daugeliu atvejų 1366 x 768 skiriamosios gebos ekrano dizainas veikia.

Todya, dauguma žmonių turi didelius plačiaekranius monitorius ir jie neišnaudoja savo naršyklės lango. Taigi, jei nuspręsite sukurti ne daugiau kaip 1366 pikselių pločio puslapį, jūsų puslapis greičiausiai atrodys puikiai daugelyje naršyklės langų net dideliuose didesnės raiškos monitoriuose.

instagram viewer

Naršyklės plotis

Sprendžiant apie tinklalapio plotį, dažnai pamirštama problema yra tai, kokio dydžio jūsų klientai saugo savo naršykles. Tiksliau, ar jie maksimaliai padidina savo naršykles viso ekrano dydžiu, ar išlaiko mažesnes nei visame ekrane?

Paskyrę klientus, kurie maksimaliai padidina ar ne, pagalvokite apie naršyklės kraštus. Kiekvienoje žiniatinklio naršyklėje naudojama slinkties juosta ir kraštinės kraštinės, kurios sumažina turimą erdvę nuo 800 iki maždaug 740 pikselių ar mažiau, naudojant 800 x 600 skiriamąją gebą, ir apie 980 pikselių maksimaliuose languose, esant 1024 x 768 rezoliucijas. Tai vadinama naršykle chromuotas ir tai gali atimti iš naudingos vietos jūsų puslapio dizainui.

Fiksuoto arba skysčio pločio puslapiai

Kuriant savo svetainės plotį reikia galvoti ne tik apie faktinį skaitinį plotį. Taip pat turite nuspręsti, ar turėsite fiksuotas plotis arba skysčio plotis. Kitaip tariant, ar ketinate nustatyti konkretaus skaičiaus (fiksuoto) ar procento (skysčio) plotį?

Fiksuotas plotis

Fiksuoto pločio puslapiai yra tiksliai tokie, kokie jie skamba. Plotis yra fiksuotas pagal konkretų skaičių ir nesikeičia, nesvarbu, kokia didelė ar maža yra naršyklė. Šis požiūris gali būti geras, jei jums reikia, kad jūsų dizainas atrodytų vienodai, nepaisant to, kokia plati ar siaura yra jūsų skaitytojų naršyklė, tačiau šis metodas neatsižvelgia į jūsų skaitytojus. Žmonės, kurių naršyklės yra siauresnės nei jūsų dizainas, turės slinkti horizontaliai, o žmonėms, turintiems plačias naršykles, ekrane bus daug tuščios vietos.

Norėdami sukurti fiksuoto pločio puslapius, naudokite tam tikrus taškų skaičius savo puslapių dalims.

Skysčio plotis

Skysto pločio puslapiai (kartais vadinami lankstaus pločio puslapiai) plotis skiriasi priklausomai nuo to, koks yra naršyklės langas. Ši strategija suteikia dizaino, kuris labiau orientuojamas į klientus. Skysto pločio puslapių problema yra ta, kad juos gali būti sunku perskaityti. Jei nuskaitymo ilgis teksto eilutės yra ilgesnė nei 10–12 žodžių arba trumpesnė nei 4–5 žodžiai, gali būti sunku perskaityti. Tai reiškia, kad skaitytojai, turintys didelius ar mažus naršyklės langus, turi problemų.

Norėdami sukurti lankstaus pločio puslapius, naudokite procentus arba ems jūsų puslapio padalijimo pločiams. Susipažinkite su CSS maks. plotis nuosavybė. Ši savybė leidžia nustatyti plotį procentais, bet tada jį apriboti, kad jis nebūtų toks didelis, kad žmonės negalėtų jo perskaityti.

CSS medijos užklausos

Geriausias šių dienų sprendimas yra naudoti CSS medijos užklausas ir reaguojantį dizainą, norint sukurti puslapį, kuris prisitaiko prie jį peržiūrinčios naršyklės pločio. Reaguojantis žiniatinklio dizainas naudoja tą patį turinį kuriant tinklalapį, kuris veikia, nesvarbu, ar jį žiūrite 5120 pikselių, ar 320 pikselių pločio. Skirtingo dydžio puslapiai atrodo skirtingai, tačiau juose yra tas pats turinys. Naudodamiesi medijos užklausa CSS3, kiekvienas priimantis įrenginys atsako į užklausą savo dydžiu, o stiliaus lapas prisitaiko prie konkretaus dydžio.

instagram story viewer