Raskite tinklalapio elemento matmenis

Šis vadovas yra skirtas padėti jums nustatyti fiksuoto pločio išdėstymą konkrečiam įrenginiui. Jei jūsų turinys bus rodomas skirtinguose "iPad" dydžiuose, galite nukreipti CSS taisykles ir vaizdus naudodami žiniasklaidos užklausas, skirtus konkrečiuose įrenginiuose arba sukurti skysčio išdėstymą, pagrįstą procentais, o ne konkrečiu fiksuotu pločiu.

  • aparatÅ«ros taÅ¡kai, CSS pikseliai ir įrenginio pikselių santykis
  • iÅ¡dÄ—stymas plotis
  • didelÄ—s skiriamosios gebos vaizdai tinklainÄ—s ekranai
  • Ä®renginiai
  • Navigacijos elementas Matmenys

Kai "Apple" pristatė tinklainės ekranus "iPads" ir "iPhone", šių įrenginių pikselių matmenys dažnai buvo gerokai didesni nei dauguma esamų pilno dydžio monitorių, o šių naujų prietaisų fizinio ekrano dydžiai buvo daug mažesni.

Leisti svetaines rodyti per šiuos ekranus, "Apple" sukūrė atskirus aparatūros taškų sąvokas (kartais vadinama ekrano taškeliais arba ekrano taškeliais) ir CSS pikseliais (kurie kartais vadinami programinės įrangos taškai).

Aparatūros taškai yra atskirų ekrano taškų skaičius (iš esmės šviesos taškų), kuris sudaro konkretų ekraną. Daugiau atskirų aparatūros taškų, kuriuos ekranas turi tam tikrą ekrano dydį, tuo didesnė skiriamoji geba ir aiškesnis rodiklis.

Jei supakuojate daugiau pikselių į mažesnę erdvę, tie individualūs pikseliai turės būti mažesni, kad tilptų - tai reiškia, kad aparatūros pikselio dydis gali labai skirtis nuo vieno įrenginio į kitą.

CSS pikseliai, kita vertus, yra suprojektuotos taip, kad būtų maždaug tokio paties dydžio per įrenginius. Tai leidžia išdėstyti su konkrečiais CSS matmenimis, kurie turi būti rodomi nuosekliai per ekranus su panašiais fiziniais matmenimis, tačiau skirtingais numeriais aparatūros taškų sudaro šį ekraną.

įrenginiams, turintiems didelės skiriamosios gebos ekranus, gamintojai apibrėžia prietaiso pikselių santykį pagal jų ekrano dydį ir skiriamąją gebą. Šis santykis apibrėžia, kiek aparatūros pikselių sudaro CSS pikselį. Be to, "Apple" tinklainės iPads iki šiol, kiekvienas CSS pikselis yra sudarytas iš 4 aparatūros taškų (2 aparatūros taškų aukščio ir 2 aparatūros taškų pločio), o tai reiškia įtaiso pikselių santykį 2. Senesni, ne tinklainės "iPads" naudoja įrenginį Pikselių santykis 1 Taigi aparatūros taškų lygūs CSS pikseliai šiems įrenginiams.

.

kitiems įrenginiams galite nustatyti standartinį CSS išdėstymo plotį, padalijant horizontalių aparatūros taškų matmenis įrenginio pikselių santykiu. Pavyzdžiui, 11 colių "iPad Pro" kraštovaizdyje yra 2388 pikselių pločio aparatūros taškų išspręsti 1668 pikselių aukščio. Skiriant 2388 iki 2 (įrenginio pikselių santykis bet kurio tinklainės ekranui) lemia standartinį CSS išdėstymo plotį 1194 pikselių, kurie turi būti naudojami kaip pagrindo plotis bet kokiam turiniui, skirtame įrodyti šiame įrenginyje kraštovaizdžio režimu.

Jei norite apibrėžti kitokį CSS pikselių plotį savo išdėstymui, "Apple" leidžia nustatyti "Custom ViewPort" naudojant "Meta viewport" žyme. Nors peržiūros sritis yra palaikoma dabartinėmis "iOS" ir "iPados" versijomis, tai gali pasikeisti būsimose versijose. Dėl šios priežasties, mes paprastai rekomenduojame remtis savo išdėstymą ant standartinio CSS pikselių plotis prietaiso, jei įmanoma.

Nors jūsų išdėstymas turėtų būti grindžiamas CSS pikseliais, vis tiek galite naudoti didelės skiriamosios gebos vaizdus tinklainės ekranams. Tai veikia naudojant vaizdą pagal ekrano aparatūros pikselių dydį, tada naudojant "Inline HTML", "CSS", "JavaScript" arba "Media" užklausas, kad pakeistumėte vaizdą į tinkamą CSS pikselių matmenis naudojant "plotį" ir "aukščio" atributus.

Norėdami tęsti 11 colių "iPad" pavyzdį, jei norėjote nustatyti pilno pločio antraštės vaizdą, tai būtų apibrėžta CSS arba inline html kaip 1194 taškų plotį. Naudojamas vaizdo failas būtų dvigubai, kad (remiantis 2 tinklainės ekranų įrenginio pikselių santykiu), kurio plotis yra 2388 pikselių.

  • Visi - visoms medijos tipams
  • Spausdinti - spausdintuvams
  • Ekranas - kompiuterių ekranams, tabletÄ—ms ir, iÅ¡maniųjų telefonų
  • kalba - ekrano skaitytojams, kurie "skaito" puslapį garsiai

Svetainės pateikimas su pritaikomu išdėstymu vadinamas reaguojančiu interneto dizainu. Ir CSS žiniasklaidos užklausos yra viena iš svarbiausių reaguojančių dizaino dalių. Šiame straipsnyje mes ketiname atidžiau pažvelgti į žiniasklaidos klausimus ir kaip juos naudoti CSS.

.

Kas yra žiniasklaidos užklausa?

  • Kokios narÅ¡yklÄ—s naudoja?
  • apie kokio tipo įrenginius?
  • Kas yra jų ekrano skiriamoji geba?
  • kaip NarÅ¡yklÄ—s įrankių juostos yra daug vietos?
  • KÄ… reiÅ¡kia man kaip svetainÄ—s kÅ«rÄ—jas?

Naudodamiesi CSS3 ir mediaques pagalba galite pakeisti savo svetainės išdėstymą pagal aptiktą ekrano dydį prietaiso (būti kompiuterio ekrane, planšetiniame telefone, išmanųjį telefoną, ...). Bet kokios yra dabartinės gairės ir geriausios praktikos? Skaityk.

.

Įrenginiai ir rezoliucijos, bendri klausimai

Tai priklauso nuo jūsų svetainės turinio. Labai svarbi informacija turėtų būti "virš sulankstymo", o tai reiškia: matoma be slinkimo. Taigi visada gerai žinoti galimą aukštį dažniausiai naudojamiems įrenginiams, kad būtų išvengta pjovimo banners vidurio arba išleisti, kad labai svarbus skambučių į veiksmo mygtukas iš akių. Negalima nukreipti prietaiso?

SvetainÄ—s pertvarkymo paslaugos Bangalore Revamp svetainÄ—je

Svetainės pertvarkymas reiškia esamų interneto svetainių ir taikomųjų programų tarnybų persikraumą ir pertvarkymą. Pertvarkyta svetainė palieka vartotoją informuoti ir sužavėti savo įmonės įvaizdį.

SvetainÄ—s pertvarkymo paslaugos Bangalore Revamp svetainÄ—je
Mes naudojame slapukus
Mes naudojame slapukus, siekiant užtikrinti, kad suteiktume jums geriausią patirtį mūsų svetainėje. Naudodami svetainę sutinkate su mūsų slapukų naudojimu.
Leiskite slapukams.