Веб-браузерлердің пайыздық мәндерді пайдаланып дисплейді қалай анықтайтынын біліңіз
Көптеген веб-дизайнерлері ендік мәндері үшін пайыздарды пайдалану арқылы қиын уақытқа ие. Нақтырақ айтқанда, браузер осы пайыздарды қалай есептегенімен шатасып кетеді. Төменде сіз жауапты веб-тораптағы ені есептеулерінің пайызы қалай жұмыс істейтіні туралы толық түсініктеме аласыз.
Ені мәндері үшін пикселдерді пайдалану
Пиксельді ендік мән ретінде пайдаланғанда, нәтижелер өте қарапайым. Егер құжаттың тақырыбындағы элементтің енінің мәнін ені 100 пикселге орнату үшін CSS қолдансаңыз, онда бұл элемент веб-сайттың мазмұны немесе төменгі деректемесінде немесе басқа аймақтарында 100 пикселге дейін орнатылған өлшеммен бірдей болады. бет. Пиксельдер абсолютті мән болып табылады, сондықтан 100 пиксель 100 пиксел болып табылады. Өкінішке орай, пиксель мәндері түсінікті болғанымен, олар жауап беретін веб-сайттарда жақсы жұмыс істемейді.
Этан Маркоте «негізгі веб-дизайн» терминін құрды, бұл тәсіл 3 негізгі қағидатты қамтиды:
- Сұйық тор
- Сұйық медиа
- Медиа сұраулар
Алғашқы екі нүкте, сұйықтық торы және сұйық орта, құндылықтарды өлшеу үшін пикселдердің орнына пайыздық қатынастарды пайдалану арқылы қол жеткізіледі.
Ені мәндері үшін пайыздарды пайдалану
Элемент үшін енін орнату үшін пайыздарды пайдаланған кезде, элементтің көрсетілетін нақты өлшемі құжатта қай жерде екеніне байланысты өзгереді. Пайыздар салыстырмалы мән болып табылады, яғни көрсетілетін өлшем құжатыңыздағы басқа элементтерге қатысты.
Мысалы, кескіннің енін 50% -ға орнатсаңыз, бұл кескіннің қалыпты өлшемінің жартысында көрсетілетінін білдірмейді. Бұл кең таралған түсінік.
Егер сурет түпнұсқалық ені 600 пиксель болса, онда CSS мәнін 50% көрсеткіште көрсету үшін ол веб-браузерде 300 пикселге дейін жететінін білдірмейді. Бұл пайыздық мән кескіннің өзіндік өлшеміне емес, сол суретті қамтитын элементтің негізінде есептеледі. Егер контейнер (бөлісу немесе басқа HTML элементі болуы мүмкін) ені 1000 пиксель болса, онда сурет 500 пиксельде көрсетіледі, себебі бұл мән контейнер енінің 50% -ын құрайды. Егер құрамында элемент ені 400 пиксел болса, онда сурет тек 200 пиксельде көрсетіледі, себебі бұл мән контейнердің 50% -ын құрайды. Мұнда суретте 50% мөлшерде сурет бар, ол оның құрамына толығымен байланысты.
Есіңізде болсын, жауапты дизайн сұйық. Орналасу және өлшемдер экран өлшемі / құрылғы өзгерген сайын өзгереді . Егер сіз бұны физикалық емес, веб-терминдерде ойласаңыз, бұл орам материалымен толтырылған картон қорабына ұқсайды. Егер сіз қораптың сол материалмен толтырылғанын айтсаңыз, сізге қажетті орау мөлшері қораптың өлшеміне байланысты өзгереді. Сонымен қатар, веб-дизайндағы пайыздық ені үшін де қолданылады.
Басқа пайызға негізделген пайыздық мөлшерлеме
Суретте / контейнер мысалында мен жауап элементінің қалай көрінетінін көрсету үшін құрамында элемент үшін пиксель мәндерін қолданамын. Іс жүзінде, құрамдас элемент пайызға тең болады және бұл контейнер ішіндегі кескін немесе басқа элементтер олардың мәндерін пайыздық пайызға негізделетін болады.
Мұны іс жүзінде көрсететін тағы бір мысал.
Сайттың «контейнер» (жалпы веб-дизайн тәжірибесі) сыныбы бар бөлімшенің құрамында болатын сайт бар дейік. Бөлімнің ішіне үш басқа бөлімше кіреді, ол сізді 3 тік баған ретінде көрсетуге мәжбүрлейді. Бұл HTML келесідей болуы мүмкін:
Енді, сіз «контейнерлік» бөлімнің өлшемін 90% деп айту үшін CSS-ні пайдалана аласыз. Бұл мысалда, контейнерлік бөлікте ешқандай нақты мәнге қойылмаған денеден басқа, оны қоршап тұрған басқа элемент жоқ. Әдепкі бойынша, браузер терезесінің 100% ретінде көрінеді. Сондықтан «контейнерлік» бөлімнің пайызы браузер терезесінің өлшеміне негізделеді. Бұл браузер терезесі мөлшері өзгерген сайын, бұл «контейнердің» мөлшері де болады. Сондықтан браузер терезесі кеңінен 2000 пиксел болса, бұл бөлім 1800 пиксельде көрсетіледі. Бұл 2000 жылғы 90% -ды құрайды (2000 х .90 = 1800), бұл браузердің өлшемі.
Егер «контейнер» ішіндегі «кол» бөлімдердің әрқайсысы 30% мөлшерінде орнатылса, олардың әрқайсысы осы мысалда 540 пиксельді кеңейтеді. Бұл 1800 пиксельдің 30% -ы деп есептеледі, бұл контейнер (1800 x 30 = 540). Егер осы контейнердің пайыздық мөлшерін өзгерткен болсақ, онда бұл ішкі бөлімдер олардың элементтеріне тәуелді болғандықтан, олар көрсететін көлемде өзгереді.
Браузер терезелері ені 2000 пиксельде қалады деп есептейік, бірақ біз контейнердің пайыздық мәнін 90% орнына 80% -ға ауыстырамыз. Яғни 1600 пиксельді кеңістікте енді (2000 х .80 = 1600). Егер біз CSS-ді 3 «кол» бөлімшелерінің өлшеміне өзгертпесеңіз және оларды 30% -ға қалдырсақ, олар қазірдің өзінде әр түрлі болады, өйткені олардың құрамдас бөлігі болып табылатын контекст өзгерді. Бұл 3 дивизия енді ені 480 пиксельді құрайды, яғни 1600-дан 30% немесе контейнер өлшемі (1600 х .30 = 480).
Одан әрі қарай, егер осы «кол» бөлімдерінің бірінде сурет болған болса және бұл кескін пайыздық мөлшерде пайдаланылса, оны өлшеудің контексті «кол» өзі болар еді. Бұл «кол» дивизиясы мөлшері өзгерген кезде, оның ішіндегі сурет де еді. Сондықтан егер браузердің өлшемі немесе «контейнер» өзгерсе, бұл «кол» ішіндегі кескіннің мөлшерін өзгерте алатын үш «кол» бөлімдеріне әсер етеді. Көріп отырғаныңыздай, бұл барлық қосылған кезде ол пайыздық өлшемдерге негізделеді.
Веб-беттегі элементтің пайыздық мән ені үшін қалай пайдаланылатынын қарастыратын болсаңыз, бұл элементтің бет түзетуінде болған мәтінмәнді түсінуіңіз керек.
Қысқаша
Пайыздар жауапты веб-сайттар үшін орналасуды құруда маңызды рөл атқарады. Сіз өзіңіздің суреттеріңізді жауапты түрде немесе пайыздық енін пайдалана аласыз ба, олар өлшемдері бір-біріне қатысты, шын мәнінде сұйық тор жасау үшін, осы есептеулерді түсініп, қалаған көрініске қол жеткізу үшін қажет болады.