браузерлер пайыздык баалуулуктарды пайдалануу менен экранды аныктайт кантип Үйрөнүү
Көптөгөн студенттер жооп желе дизайны туурасы баалуулуктарды пайыздарды колдонуу менен көп убакыт талап кылынышы мүмкүн. Тактап айтканда, серепчи ошол пайыздарды эсептейт кандай баш аламандык бар. сага Төмөндө пайызы бир жооп сайтына туурасы эсептер үчүн иш-чарасы кандайча иштей толук түшүндүрмө табасыз.
Колдонуу Туурасы нормаларынын пиксел
Эгер туурасы баалуулук катары пикселди пайдалануу, натыйжасы абдан жөнөкөй болуп саналат. Эгер документ баш элементтин туурасы Наркы туурасы 100 пиксел коюуга CSS колдоно турган болсо, бул элемент ошол көлөмү сиз кенен сайт мазмунуна же этеги же башка аймактарында, анын ичинде 100 пиксел коюлган болуп калат бет. Pixels абсолюттук мааниси бар, андыктан, документтеги элементке пайда 100 пиксел, 100 пиксел экени маанилүү эмес. Тилекке каршы, пиксел баалуулуктарын түшүнүү үчүн жеңил, ал эми алар жооп сайттардын жакшы иштебейт.
Этан Marcotte 3 негизги директорлору камтыган бул ыкманы түшүндүрүп, мөөнөт "жооп дизайн" терминин:
- А суюктук тор
- Fluid медиа
- медиа суроолор
Биринчи эки упай, бир суюктук тор жана суюктук медиа, баалуулуктарды чыгаруу үчүн, ордуна пиксел, пайыздарды колдонуу аркылуу ишке ашырылат.
Туурасы нормаларынын пайызы колдонуу
Эгер сиз элементтин үчүн туурасын белгилөө үчүн пайыздарды колдонсок, ошол элемент көрсөтүп реалдуу өлчөмү ал документте кайда карап, ар кандай болот. Percentages салыштырмалуу наркы, көрсөтүлгөн өлчөмүн дегенди сиздин документтин башка элементтердин салыштырмалуу бар.
Мисалы, сиз туурасын белгиленген болсо, кандайдыр бир буркан 50% га чейин төмөндөгөн, бул сүрөт анын кадимки өлчөмү жарым көрсөткөн болот дегенди билдирбейт. Бул жалпы ката болуп саналат.
бир сүрөттөлүш тилинде чет 600 кенен болсо, анда бир CSS баасын 50% аны көрсөтүү менен бул интернет браузер аркылуу туурасы 300 пиксел болот дегенди билдирбейт. Бул пайыздык маани бул сүрөттөлүштү эмес, айкелдин өзү эне көлөмүн камтыйт элементтин негизинде эсептелинет. Эгерде (а бөлүнүү же башка HTML элемент болушу мүмкүн) контейнер 1000 пиксел кенен болсо, анда сүрөттүн маани контейнерлердин, туурасы 50% болгондуктан, 500 пиксел көрсөткөн болот. камтыган элемент 400 пиксел кенен болсо, анда сүрөттүн маани контейнер 50% болгондуктан гана, 200 пиксел көрсөткөн болот. Суроо берүү бул жерде аны камтыган элементке толугу менен көз каранды болгон 50% өлчөмүн жазыла элек.
Дизайн сайта өзгөрүлмө болуп турат, унутпа. Layouts жана өлчөмдөрү болуп өзгөрөт экран көлөмү / түзмөк өзгөртүү . Бул физикалык эмес желе жагынан жөнүндө ойлонуп жатса, материалдык-чүйдөлөрдүн менен толтуруп жатат картон куту сыяктуу. Сиз кутуча жарымы ошол материалды толуп керек деп, анда керек өлчөп суммасы кутусунун өлчөмүнө жараша болот. Ошол желе долбоордо пайыздык көлөмдөгү да ушуну айтууга болот.
Башка пайыздык негизинде Percentages
сүрөт / контейнер Мисалы, кабыл сүрөт өзгөрүүлөр болорун көрсөтүү үчүн, мен камтыган элементи үчүн пикселдик пайдаланылган. Чындыгында, камтыган элемент ошол эле контейнер пайыз үлүшү боюнча алардын баалуулуктарды ала турган, пайыз жана сүрөт, же башка элементтер коюуга болот.
Бул иш жүзүндө бул көрсөтүлгөн дагы бир мисал.
Эгер бүт сайт "контейнер" классынын менен бөлүштүрүүнүн камтылган (жалпы дизайн практикасы) сайтты бар деп айт. Бул бөлүнүү Inside бара стили 3 тик катардан катары көрсөтүү үчүн үч башка бөлүмдөрү бар. Бул HTML мындай болушу мүмкүн:
Эми, Сиз ошол "контейнер" бөлүмүнүн өлчөмүн 90% деп белгиленген үчүн колдонушу мүмкүн. Бул мисалда, контейнер бөлүү биз кандайдыр бир мааниге коюлганда эмес, дененин башка курчап дагы бир нерсе жок. Алыдын ала, денеси серепчи терезесинин 100% деп жооп беришет. Ошондуктан, "контейнер" бөлүмүнүн астындагы пайыздык серепчи терезесинин өлчөмү негизделет. ал серепчи терезе өлчөмү кандай өзгөрүүлөр болуп жатканы, бул "идиш" өлчөмү болот. Ошентип, серепчи терезеси 2000 пиксел кенен болсо, бул бөлүнүү 1800 пиксел көрсөткөн болот. Бул браузерде өлчөмү 2000 (2000-х .Студенттердин 90 = 1800)) 90-пайыз, катары эсептелинет.
Ар бир "контейнер" табылган "Col" бөлүмдөрүнүн бири болсо, 30% бир өлчөмүнө коюлган, анда алардын ар бири, мисалы, туурасы 540 пиксел болот. Бул контейнер (1800 х .30 = 540) боюнча көрсөтөт 1800 пиксел 30% болуп эсептелет. биз идиш пайызын өзгөрткөн болсо, бул ички бөлүмдөрү, ошондой эле, алар бул элементти камтыйт көз каранды, анткени учурда чыгарат өлчөмүн өзгөртүү керек.
Кудайдын серепчинин терезелери туурасы 2000 пиксел калган деп элестетели, бирок биз контейнер пайыздык баасын 80% ордуна 90% га чейин өзгөрүп турат. Албетте, кең азыр (2000 х 80 = 1600) 1600 пикселя тиешесин берет дегенди билдирет. Биз 3 "Col" бөлүмдөрүнүн өлчөмү CSS өзгөртүп, жана 30%, аларды калтырып, жок болсо да, алар менен өлчөмдөрү контекст башкача азыр камтыган элементи тартып, тиешесин берем, өзгөрдү. Ал 3-бөлүмдөрү эми 1600-жылдын 30% 480 пиксел, туурасы бир, деп жооп беребиз, же контейнер (1600 .30 = 480) өлчөмү.
андан да ары алуу менен, бир пайызын колдонуп септи, жок, бул "Col" бөлүмдөрүнүн бири ичинде бир сүрөттөлүш болгон жана ал сүрөттөлүш болсо, аны ченөө үчүн контекст "Col" өзүндө болот. Ошол "Col" бөлүштүрүү көлөмү өзгөргөн сайын, анын ичинде сүрөт болмок. Ошентип, браузер же "контейнер" өлчөмү өзгөртүлгөн болсо, өз кезегинде, ичине сүрөттүн өлчөмүн өзгөртө турган үч "Col" бөлүмдөр, таасир эте турган "КОЛ." Көрүнүп тургандай, бул бардык байланыштуу болгондо, ал пайыздык-айдаган лучший баалуулуктарды келет.
Эгер интернет барактын ичинде элемент пайыздык маани туурасы үчүн пайдаланылган учурда аткарылганын карап, ошол элемент Барактын белгилөө жашап жаткан контекстти түшүнүшү керек.
Кыскача
Percentages үчүн долбоорду түзүүдө маанилүү ролду ойнойт кабыл сайттардын . Сиз responsively сүрөттөрдү туткасы же өлчөмдөрү бири-бирине салыштырмалуу бир чындап суюктуктун энергиясы үчүн пайыздык кендигинин колдонуп жаткан жокпу, бул эсептөөлөрдү түшүнүү сиз каалаган карап жетишүү зарыл.