Даведайцеся, як вэб-браўзэры вызначаюць адлюстраванне з выкарыстаннем працэнтных значэнняў
Многія студэнты спагадлівага вэб - дызайну маюць цяжкі час , выкарыстоўваючы працэнты для значэнняў шырыні. У прыватнасці, існуе блытаніна з тым, як браўзэр вылічае гэтыя працэнты. Ніжэй вы знойдзеце падрабязнае тлумачэнне таго, як працэнты работы па шырыні вылічэнняў у рэагуе сайце.
Выкарыстанне дазволу для значэнняў шырыні
Пры выкарыстанні ў якасці пікселяў па шырыні значэння, вынікі вельмі проста. Калі вы выкарыстоўваеце CSS, каб усталяваць значэнне шырыні элемента ў загалоўку дакумента шырынёй 100 пікселяў, то гэты элемент будзе мець той жа памер, як той, які вы ўсталявалі на 100 пікселяў у шырыню па змесце вэб-сайта або зносцы або іншых абласцей стар. Пікселі абсалютная значэнне, так 100 пікселяў 100 пікселяў незалежна ад таго, дзе ў дакуменце з'яўляецца элемент. На жаль, у той час як значэнні пікселяў лёгка зразумець, што яны не працуюць добра рэагуюць вэб-сайтаў.
Этан Маркотт ўвёў тэрмін «спагадны вэб-дызайн», тлумачачы гэты падыход, якія змяшчаюць 3 ключавых прынцыпаў:
Гэтыя першыя дзве кропак, сетка вадкасці і цякучыя асяроддзя, дасягаюцца пры выкарыстанні адсоткаў, а не пікселі, для вызначэння памеру значэння.
Выкарыстоўваючы працэнты для значэнняў шырыні
Пры выкарыстанні працэнты ўсталяваць шырыню для элемента, фактычны памер гэтага элемента адлюстроўваецца ў будзе вар'іравацца ў залежнасці ад таго, дзе ён знаходзіцца ў дакуменце. Працэнтнае ўтрыманне адноснага значэнне, гэта значыць памер які адлюстроўваецца адносна іншых элементаў дакумента.
Напрыклад, калі вы ўсталюеце шырыню выявы на 50%, гэта не азначае , што малюнак будзе адлюстроўвацца на палове яго нармальнага памеру. Гэта распаўсюджаная памылка.
Калі выява першапачаткова 600 пікселяў у шырыню, а затым, выкарыстоўваючы значэнне CSS, каб адлюстраваць яго на 50% не азначае, што яна будзе складаць 300 пікселяў у шырыню ў вэб-браўзэры. Гэта працэнтнае значэнне вылічаецца на аснове элемента, які ўтрымлівае гэты вобраз, а не роднай памер самога малюнка. Калі кантэйнер (які можа быць падзел або якой-небудзь іншай элемент HTML), складае 1000 пікселяў у шырыню, то малюнак будзе адлюстроўвацца на 500 кропак, паколькі гэта значэнне складае 50% ад шырыні кантэйнера. Калі які змяшчае элемент 400 пікселяў у шырыню, то малюнак будзе адлюстроўвацца толькі на 200 пікселяў, так што значэнне складае 50% ад ёмістасці. Малюнак у пытанні тут мае памер 50%, які цалкам залежыць ад элемента, які яго ўтрымлівае.
Памятаеце, што адаптыўны дызайн з'яўляецца вадкасцю. Фарматы і памеры будуць змяняцца па меры змены памеру / экрана прылады . Калі вы думаеце пра гэта ў фізічным выражэнні, ня-вэб, гэта як мець кардонную скрынку, што вы запаўняеце з пакавальным матэрыялам. Калі вы кажаце, што скрынка павінна быць запоўненая напалову з гэтым матэрыялам, колькасць упакоўкі вам трэба будзе вар'іравацца ў залежнасці ад памеру скрынкі. Тое ж самае справядліва і для адсоткавага шырыні ў вэб-дызайне.
Працэнты, заснаваныя на іншыя працэнты
У прыкладзе малюнка / кантэйнера, я выкарыстаў значэнне пікселяў для які змяшчае элемента, каб паказаць, як будуць адлюстроўваць ў адказ малюнка. У рэчаіснасці, які змяшчае элемент таксама будзе ўстаноўлены ў працэнтах, і малюнак, або іншых элементаў, ўнутры кантэйнера, што б атрымаць іх значэння на аснове працэнтнай долі ў працэнтах.
Вось яшчэ адзін прыклад, які паказвае, што гэта на практыцы.
Скажам, у вас ёсць вэб-сайт, дзе ўвесь сайт змяшчаецца ў падзеле з класам «кантэйнер» (агульны дызайн практыкі вэб). Унутры гэтага падраздзялення тры іншыя падраздзяленні, якія вы ў канчатковым выніку стыль для адлюстравання як 3 вертыкальных слупкоў. Гэты HTML можа выглядаць наступным чынам:
Цяпер вы можаце выкарыстоўваць CSS, каб усталяваць памер гэтага «кантэйнера» падзел сказаць 90%. У гэтым прыкладзе, падзел кантэйнера не мае іншы элемент, які акружае яго, акрамя цела, якое мы не ўсталяваць якую-небудзь пэўную велічыню. Па змаўчанні, цела будзе адлюстроўвацца як 100% акна браўзэра. Такім чынам, працэнт падраздзялення «кантэйнер» будзе на аснове памеру акна браўзэра. У тым, што акно браўзэра змяняецца ў памерах, так што будзе памер гэтага «кантэйнера». Такім чынам, калі акно браўзэра 2000 пікселяў у шырыню, гэта падзел будзе адлюстроўвацца на 1800 пікселяў. Гэта разлічваецца як 90-адсоткаў 2000 (2000 х .90 = 1800)), што памер браўзэра.
Калі кожны адзін з «Col» падраздзяленняў, знойдзеных у межах «кантэйнера» ўстаноўлены ў памеры 30%, то кожны з іх будзе 540 пікселяў у шырыню ў гэтым прыкладзе. Гэта разлічваецца як 30% ад 1800 пікселяў, што кантэйнер аказвае на (1800 х .30 = 540). Калі мы змянілі працэнт гэтага кантэйнера, гэтыя ўнутраныя аддзелы таксама зменяцца ў памерах, якія яны аказваюць на, так як яны залежаць ад гэтага элемента ўтрымлівае.
Давайце выкажам здагадку, што вокны браўзэра застаецца на ўзроўні 2000 пікселяў у шырыню, але змяніць працэнтнае значэнне ёмістасці да 80% замест 90%. Гэта азначае, што яна будзе аказваць на 1600 пікселяў у шырыню У цяперашні час (2000 х .80 = 1600). Нават калі мы не змяніць CSS для памеру нашых 3 «Col» дывізій, і пакінуць іх на 30%, яны будуць аказваць па-іншаму, так як іх змяшчае элемент, які з'яўляецца кантэкстам, што яны маюць памер ад, змяніўся. Гэтыя 3 падраздзялення цяпер будуць адлюстроўвацца як 480 пікселяў у шырыню кожны, што складае 30% ад 1600, або памер кантэйнера (1600 х 0,30 = 480).
Прымаючы гэта яшчэ далей, калі ёсць выява ўнутры аднаго з гэтых «Col» падраздзяленняў і гэты вобраз быў прасякнуты адсоткам, кантэкст для яго праклейвання бы «Col» сам па сабе. Паколькі гэта «Col» дзяленне змянілася ў памерах, так што б малюнак ўнутры яго. Такім чынам, калі памер браўзэра або «кантэйнер» змяніўся, што паўплывала б на тры «Col» падраздзяленняў, якія ў сваю чаргу змяніць памер малюнка ўсярэдзіне «цв.» Як вы можаце бачыць, гэта ўсё звязана, калі што тычыцца працэнтных значэнняў кіраванай праклейвання.
Калі вы лічыце, як элемент ўнутры вэб-старонкі будзе аказваць, калі працэнтнае значэнне выкарыстоўваецца для яго шырыні, вы павінны разумець кантэкст, у якім гэты элемент знаходзіцца ў разметцы старонкі.
У зводцы
Адсоткавыя суадносіны гуляе вырашальную ролю ў стварэнні макета для рэагуюць сайтаў . Калі вы проклейка малюнка зваротны або выкарыстоўваючы шырыню ў працэнтах, каб зрабіць сетку сапраўды вадкасцяў, памеры якіх адносна адзін сябар, разумеючы гэтыя разлікі будзе неабходна для дасягнення вонкавага выгляду вы хочаце.