Омӯзед, ки чӣ тавр веб браузерҳо як намоишро бо истифода аз арзишҳои фоиз муайян мекунад
Бисёр донишҷӯёни тарҳрезии вебсафҳаи замонавӣ вақти душворро бо фоизҳо барои арзишҳои васеъ истифода мебаранд. Махсусан, бо браузери ин браҳо чӣ тавр ҳисоб карда мешавад. Дар зер шумо мефаҳмед, ки чӣ тавр фоизҳо барои ҳисобҳои васеъ дар вебсаи ҷавобӣ кор хоҳанд кард.
Истифодаи Pixel барои арзиши паҳн
Вақте ки шумо pixel-ро ҳамчун арзиши васеъ истифода мебаред, натиҷаҳо хеле оддӣ мебошанд. Агар шумо CSS-ро барои муайян кардани арзиши васеътари унсурҳо дар сарлавҳаи ҳуҷҷат ба 100 пиксел паҳн кунед, ин унсури андозаи ҳамон андозаест, ки шумо ба 100 пиксел васеъ дар муҳтавои вебсайт ё пойгоҳ ё дигар соҳаҳои саҳифа Пикселҳо арзиши мутлақ мебошанд, то 100 пиксел 100 пиксел бошад, новобаста аз он, ки дар ҳуҷҷати шумо як унсури пайдо мешавад. Мутаассифона, дар ҳоле, ки арзишҳои pixel осон ба фаҳмидани он, онҳо дар сомонаҳои ҷавобӣ хуб кор намекунанд.
Этан Маркотс истилоҳи "тарҳрезии ҷавобии веб" -ро инъикос кард, ки ин усулро ҳамчун 3 принсипҳои асосӣ ифода мекунад:
- Шабакаи моеъ
- Методҳои радио
- Саволҳои ВАО
Он дуи аввал, як шабакаи сӯзишворӣ ва воситаҳои моеъ, бо истифода аз садҳо, ба ҷои pixels, барои андозагирии арзишҳо.
Истифодаи фоизҳо барои арзиши кулоҳ
Вақте, ки шумо барои паҳн кардани паҳнои элементҳо, андозаи воқеие, ки дар элемент нишон медиҳад, вобаста аз он, ки дар ҳуҷҷат аст, фарқ мекунад. Фоизҳо арзиши нисбӣ доранд, яъне маънои андозаи нишон додашуда ба элементҳои дигар дар ҳуҷҷати шумо вобаста аст.
Масалан, агар шумо тасвири тасвирро ба 50% муқаррар созед, ин маънои онро надорад, ки тасвир дар нисфи андозаи муқаррарии он нишон дода мешавад. Ин як нодурусти умумӣ аст.
Агар тасвири аслӣ 600 пиксел васеъ бошад, баъд аз он ки нишондиҳандаи он дар 50% нишон дода мешавад, маънои онро надорад, ки он 300 пикселро дар веб браузери васеъ хоҳад кард. Ин арзиши фоизӣ дар асоси ҷузъе, ки ин тасвирро дар бар мегирад, на андозаи варақаи тасвириро дар бар мегирад, ҳисоб карда мешавад. Агар контейнер (ки метавонад тақсим ё баъзе дигар элементҳои HTML бошад) 1000 пиксел васеъ бошад, он гоҳ тасвир дар 500 пиксел нишон медиҳад, зеро он арзиш 50% масофаи контейнер мебошад. Агар ин элемент 400 дона васеътар дошта бошад, пас тасвир фақат дар 200 пиксел нишон медиҳад, зеро он арзиш 50% аз контейнер мебошад. Тасвири дар ин ҷо ба андозаи 50%, ки ба унсуре, ки дорои он алоќаманд аст, вобаста аст.
Дар хотир доред, ки тарҳҳои ҷавобӣ суст аст. Нишондиҳандаҳо ва андозаҳо ҳамчун андозаи экран / тағъироти дастгоҳ тағйир хоҳанд ёфт . Агар шумо дар бораи ин дар ҷодаи ҷисмонӣ, ғайримуқаррарӣ фикр кунед, он аст, ки дорои қуттии картон, ки шумо бо маводи ғизоӣ пур ҳастед. Агар шумо гӯед, ки қуттӣ бояд бо он модда пур шавад, ҳаҷми бастабандише, ки шумо лозим аст, вобаста ба андозаи қутраш фарқ мекунад. Ҳамин тариқ, дараҷаи фарогирии веб дар тарҳрезии воқеӣ дуруст аст.
Фоизи дар асоси фоизи дигар
Дар намунаи тасвир / контейнер, Ман барои арзёбии тасвирҳои ҷавобӣ нишон додам, ки арзиши пикселиро барои унсурҳои он истифода мебарам. Дар ҳақиқат, элементҳои дохилӣ низ ба фоиз ва тасвири, ё унсурҳои дигар муқаррар карда мешаванд, дар дохили он контент арзиши худро дар асоси фоизи фоизи он ба даст меорад.
Ин намунаи дигаре аст, ки дар амал ин амалро нишон медиҳад.
Бигӯед, ки вебсайте, ки дар он тамоми сайти дар доираи тақсимбандӣ бо синфи "контейнер" мавҷуд аст (таҷрибаи тарҳрезии веб). Дар дохили он тақсимбандӣ се тақсимоти дигар, ки шумо дар охири он ба сифати 3 сутуни амудӣ нишон медиҳед. Ин HTML метавонад чунин бошад:
Акнун, шумо метавонед CSS-ро барои тақсим кардани андозаи он "контейнер" ба рақами 90% истифода баред. Дар ин мисол тақсимоти контейнер ҷузъи дигари он нест, ки он ғайр аз бадан, ки мо ба ягон арзиши мушаххас нарасидаем. Бо нобаёнӣ, ба 100% равзанаи браузер дода мешавад. Аз ин рӯ, фоизи тақсимоти "контейнер" ба андозаи равзанаи браузер асос меёбад. Чунки тирезаи браузер дар андозаи тағирёбанда, андозаи ин контейнер хоҳад буд. Пас, агар тирезаи браузери 2000 pixel васеъ бошад, ин тақсимот дар 1800 пиксел намоиш дода мешавад. Ин 90% -и 2000 (2000 x .90 = 1800) ҳисоб шудааст, ки андозаи браузери мебошад.
Агар ҳар яке аз сутунҳои "сегона", ки дар дохили "контейнер" ёфт шудаанд, ба андозаи 30% муқаррар карда шаванд, пас ҳар якашон дар ин намоишгоҳ 540 пиксел васеъ хоҳад шуд. Ин 30% 1800 пикселро ташкил медиҳад, ки контейнерро дар (1800 x .30 = 540) ҳисоб мекунад. Агар мо фоизи ин контротро тағйир дода бошем, ин қисмҳои дохилӣ низ ба андозаи ононе, ки дар вақти он ба унвони ҷузъи он вобастаанд, тағйир меёбад.
Биёед фикр кунед, ки windows-ро дар тӯли 2000 пиксел васеъ мегардонад, вале мо арзиши% контротро то 90% иваз мекунем. Ин маънои онро дорад, ки он ҳоло дар 1600 пиксел васеъ паҳн мекунад (2000 x .80 = 1600). Ҳатто агар мо CSS-ро ба андозаи 3 секунҷаи мо иваз накунем ва онҳоро дар 30% тарк накунем, пас аз он ки элементҳои онҳо, ки муҳити онҳо ба шумор мераванд, гуногунанд. Он се қисм тақрибан 480 пикселро васеъ мекунанд, ки 30% аз 1600 ё андозаи контейнер (1600 x .30 = 480) мебошанд.
Агар ин тасвири минбаъдаи он дар дохили яке аз ин қисмҳои "колония" вуҷуд дошта бошад ва ин тасвири бо фоиз фоида мебинад, контексти андозаи он "худи" хоҳад буд. Ончунон, ки «тақсимот» тақсим карда мешавад, ин тасвири он дар дохили он хоҳад буд. Ҳамин тавр, агар андозаи браузери ё "контейнер" иваз карда шавад, он ба се секунҷа тақсим карда мешавад, ки дар навбати худ андозаи тасвирро дар дохили "col" иваз мекунад. он ба арзишҳои назарраси андозагирӣ меояд.
Ҳангоми баррасии он, ки чӣ тавр элемент дар дохили саҳифаи интернетии вақте ки арзиши фоиз барои васеъ истифода мешавад, шумо бояд фаҳмед, ки мазмуни он дар унсури саҳифа мавҷуд аст.
Дар ҷамъбаст
Фоизҳо дар эҷоди тарҳбандӣ барои вебсафҳаҳои ҷавобӣ нақши муҳим мебозанд. Новобаста аз он ки шумо тасвирҳои расмӣ ё тасвири функсияҳоро истифода мебаред, барои гирифтани як реҷаи реаксияи росткунҷа, ки андозаи он ба якдигар вобаста аст, фаҳмидани ин ҳисобҳо барои ноил шудан ба хоҳиши худ хоҳед дид.