કેવી રીતે વેબ બ્રાઉઝર્સ ટકાવારી મૂલ્યોનો ઉપયોગ કરીને ડિસ્પ્લે નક્કી કરે છે તે જાણો
પ્રતિભાવ વેબ ડિઝાઇનના ઘણા વિદ્યાર્થીઓ પાસે પહોળાઈ મૂલ્યો માટે ટકાવારીનો ઉપયોગ કરવામાં મુશ્કેલ સમય છે. વિશિષ્ટ રીતે, ત્યાં મૂંઝવણ છે કે બ્રાઉઝર તે ટકાવારીની ગણતરી કેવી રીતે કરે છે. નીચે તમે પ્રતિભાવ વેબસાઇટમાં કેવી રીતે ટકાવારી પહોળાઈ ગણતરીઓ માટે કામ કરે છે તેના વિગતવાર સમજૂતી મળશે.
પહોળાઈ મૂલ્યો માટે પિક્સેલનો ઉપયોગ કરવો
જ્યારે તમે પહોળાઈ મૂલ્ય તરીકે પિક્સેલ્સનો ઉપયોગ કરો છો, ત્યારે પરિણામો ખૂબ સરળ છે. જો તમે કોઈ દસ્તાવેજના હેડરમાં એક ઘટકની પહોળાઇ મૂલ્યને 100 પિક્સેલ્સ પહોળું સેટ કરવા માટે CSS નો ઉપયોગ કરો છો, તો તે ઘટક તે જ માપ હશે જે તમે વેબસાઇટની સામગ્રી અથવા ફૂટર અથવા અન્ય ક્ષેત્રોમાં 100 પિક્સેલ્સ સુધી સેટ કરો છો. પાનું. પિક્સેલ્સ એક નિરપેક્ષ મૂલ્ય છે, તેથી 100 પિક્સેલ્સ 100 પિક્સેલ્સ છે, ભલે તમારા દસ્તાવેજમાં કોઈ તત્વ દેખાય. કમનસીબે, જ્યારે પિક્સેલ મૂલ્યો સમજવા માટે સરળ હોય છે, તેઓ જવાબદાર વેબસાઇટ્સમાં સારી રીતે કામ કરતા નથી
એથન માર્કટેએ "પ્રતિભાવ વેબ ડિઝાઇન" શબ્દનો ઉચ્ચાર કર્યો, જેમાં 3 કી આચાર્યો ધરાવતા આ અભિગમને સમજાવ્યું:
- પ્રવાહી ગ્રિડ
- ફ્લુઇડ મીડિયા
- મીડિયા ક્વેરીઝ
તે પ્રથમ બે બિંદુઓ, એક પ્રવાહી ગ્રિડ અને પ્રવાહી મીડિયાનો, મૂલ્યો માપવા માટે, પિક્સેલ્સની જગ્યાએ ટકાવારીનો ઉપયોગ કરીને પ્રાપ્ત થાય છે.
પહોળાઈ મૂલ્યો માટે ટકાવારીનો ઉપયોગ કરવો
જ્યારે તમે ઘટકો માટે પહોળાઈ સ્થાપિત કરવા માટે ટકાવારીનો ઉપયોગ કરો છો, ત્યારે તત્વ પ્રદર્શિત કરેલો વાસ્તવિક કદ તેના પર આધાર રાખશે કે તે દસ્તાવેજમાં ક્યાં છે. ટકાવારી એ એક સાપેક્ષ મૂલ્ય છે, જેનો અર્થ થાય છે પ્રદર્શિત કરેલો કદ તમારા દસ્તાવેજમાં અન્ય ઘટકોથી સંબંધિત છે.
ઉદાહરણ તરીકે, જો તમે છબીની પહોળાઇ 50% પર સેટ કરો છો, તો તેનો અર્થ એ નથી કે છબી તેના સામાન્ય કદના અડધા ભાગમાં દર્શાશે. આ સામાન્ય ગેરસમજ છે
જો છબી નેટીવ 600 પિક્સેલ પહોળો હોય, તો તેને 50% પર દર્શાવવા માટે CSS મૂલ્યનો ઉપયોગ થતો નથી તેનો અર્થ એ નથી કે તે વેબ બ્રાઉઝરમાં 300 પિક્સલ પહોળા હશે. આ ટકાવારી મૂલ્ય એ તત્વના આધારે ગણવામાં આવે છે કે જે તે છબી ધરાવે છે, છબીનું મૂળ કદ નથી. જો કન્ટેનર (જે વિભાજન અથવા અન્ય કોઇ HTML તત્વ હોઈ શકે) 1000 પિક્સેલ પહોળી હોય, તો તે છબી 500 પિક્સેલ્સ પર પ્રદર્શિત થશે કારણ કે તે કિંમત કન્ટેનરની પહોળાઈના 50% છે. જો સમાવતી તત્વ 400 પિક્સેલ પહોળો હોય, તો તે છબી માત્ર 200 પિક્સેલ્સ પર પ્રદર્શિત થશે, કારણ કે તે કિંમત 50% કન્ટેનર છે. પ્રશ્નમાંની છબી અહીં 50% કદ ધરાવે છે જે તત્વ પર સંપૂર્ણપણે આધાર રાખે છે જેમાં તે શામેલ છે.
યાદ રાખો, પ્રતિભાવ ડિઝાઇન પ્રવાહી છે. લેઆઉટ્સ અને કદ સ્ક્રીન માપ / ઉપકરણ ફેરફારો તરીકે બદલાશે. જો તમે ભૌતિક, નૉન-વેબ શરતોમાં આ વિશે વિચારો છો, તો તે કાર્ડબોર્ડ બોક્સની જેમ છે કે તમે પેકિંગ સામગ્રી સાથે ભરી રહ્યાં છો. જો તમે કહો કે બોક્સ તે સામગ્રીથી અડધું ભરેલું હોવું જોઈએ, તો તમારે જરૂરી પેકિંગની સંખ્યા બૉક્સના કદના આધારે બદલાઈ જશે. આ વેબ ડિઝાઇનમાં ટકાવારી પહોળાઈ માટે સાચું છે.
અન્ય ટકાવારી પર આધારિત ટકાવારી
ઈમેજ / કન્ટેનર ઉદાહરણમાં, હું સમાવતી તત્વ માટે પિક્સેલ મૂલ્યોનો ઉપયોગ કેવી રીતે દર્શાવતો હતો તે દર્શાવવા. વાસ્તવમાં, તે ઘટક ઘટક પણ ટકાવારી તરીકે સેટ કરવામાં આવશે અને તે કન્ટેનરની અંદર છબી, અથવા અન્ય તત્વો, ટકાવારીની ટકાવારી પર આધારિત તેમની કિંમતો મેળવશે.
અહીં એક બીજું ઉદાહરણ છે જે વ્યવહારમાં આ બતાવે છે.
કહો કે તમારી પાસે એક વેબસાઇટ છે જ્યાં સંપૂર્ણ સાઇટ "કન્ટેનર" (એક સામાન્ય વેબ ડીઝાઇન પ્રથા) ના વર્ગ સાથે વિભાગમાં શામેલ છે. તે ડિવિઝનની અંદર ત્રણ અન્ય વિભાગો છે કે જે તમે આખરે 3 વર્ટિકલ કૉલમ તરીકે પ્રદર્શિત કરવા માટે શૈલીમાં આવશે. તે HTML આના જેવું દેખાશે:
હવે, તમે 90% કહેવા માટે તે "કન્ટેનર" વિભાગના કદને સેટ કરવા માટે CSS નો ઉપયોગ કરી શકો છો. આ ઉદાહરણમાં, કન્ટેનર ડિવિઝનમાં બીજો એક તત્વ નથી જે તેને શરીરના સિવાયના અન્ય ભાગોથી ઘેરાયેલો છે, જે અમે કોઈ ચોક્કસ મૂલ્ય પર સેટ નથી કર્યો. ડિફૉલ્ટ રૂપે, શરીર બ્રાઉઝર વિંડોનું 100% જેટલું રેન્ડર કરશે. તેથી, "કન્ટેનર" વિભાગની ટકાવારી બ્રાઉઝર વિંડોના કદ પર આધારિત હશે. તે બ્રાઉઝર વિંડો કદમાં બદલાય છે, તેથી આ "કન્ટેનર" નું કદ હશે. તેથી જો બ્રાઉઝર વિંડો 2000 પિક્સેલ પહોળો હોય, તો આ વિભાગ 1800 પિક્સેલ્સ પર પ્રદર્શિત થશે. આને 2000 ના 90-ટકા (2000 x .90 = 1800) તરીકે ગણવામાં આવે છે, જે બ્રાઉઝરનો કદ છે.
જો "કન્ટેનર" અંદર મળેલી "કોલ" વિભાગોમાંથી દરેકને 30% ના કદ પર સેટ કરવામાં આવે છે, તો આ ઉદાહરણમાં તેમાંના દરેક 540 પિક્સલ પહોળા હશે. આ કન્ટેનર (1800 x .30 = 540) પર રેન્ડર કરે છે તે 1800 પિક્સેલ્સના 30% તરીકે ગણવામાં આવે છે. જો આપણે તે કન્ટેનરની ટકાવારી બદલી નાખી, તો આ આંતરિક વિભાગો પણ કદમાં બદલાશે, કારણ કે તે તત્વ પર આધાર રાખે છે.
ચાલો ધારો કે બ્રાઉઝર વિન્ડોઝ 2000 પિક્સેલ પહોળી છે, પરંતુ અમે 90% ની જગ્યાએ કન્ટેનરની ટકાવારી કિંમત 80% બદલે છે. તેનો અર્થ એ કે તે હવે 1600 પિક્સેલ્સ પહોળું થશે (2000 x .80 = 1600). જો આપણે આપણા 3 "કોલ" વિભાગોના કદ માટે CSS બદલતા નથી, અને તેમને 30% પર છોડી દો છો, તો તેઓ હવે અલગ રીતે રેન્ડર કરશે, કારણ કે તેમના ઘટક ઘટક છે, જેનો સંદર્ભ તેઓ દ્વારા માપવામાં આવે છે, બદલાયેલ છે. તે 3 ડિવિઝન હવે 480 પિક્સેલ પહોળા હશે, જે 1600 ના 30% છે, અથવા કન્ટેનરનું કદ (1600 x .30 = 480).
આને વધુ આગળ લઇ જવાથી, જો આ "કોલ" વિભાગોમાંની એકની અંદર છબી હતી અને તે છબી ટકાવારીનો ઉપયોગ કરીને કદમાં હતી, તો તેનો કદ બદલવાનું "કોલ" હશે. જેમ કે "કલે" ડિવિઝન કદમાં બદલાય છે, તેથી તે અંદરની છબી. તેથી જો બ્રાઉઝર અથવા "કન્ટેનર" નું કદ બદલાયું હોય, તો તે ત્રણ "કોલ" વિભાગોને અસર કરશે, જે બદલામાં "કોલ" ની અંદર ઇમેજનું કદ બદલશે. જેમ તમે જોઈ શકો છો, આ બધા જ્યારે કનેક્ટ થાય ત્યારે તે ટકાવારી આધારિત કદના કિંમતો આવે છે.
જ્યારે તમે વિચારશો કે વેબ પૃષ્ઠની અંદરના તત્વને જ્યારે તેની પહોળાઈ માટે ટકાવારી મૂલ્યનો ઉપયોગ કરવામાં આવે ત્યારે રેન્ડર થશે, તો તમારે તે સંદર્ભને સમજવાની જરૂર છે કે જેમાં તે તત્વ પૃષ્ઠના માર્કઅપમાં રહે છે.
સારમાં
ટકાવારી પ્રતિભાવશીલ વેબસાઇટ્સ માટે લેઆઉટ બનાવવા માટે એક મહત્વપૂર્ણ ભૂમિકા ભજવે છે. શું તમે ઈમેજોને પ્રતિક્રિયાત્મક રીતે માપિત કરી રહ્યા છો અથવા સાચી પ્રવાહી ગ્રીડ બનાવવા માટે ટકાવારીની પહોળાઈનો ઉપયોગ કરી રહ્યાં છો, જેમના કદ એકબીજા સાથે સંબંધિત છે, આ ગણતરીઓ સમજવા માટે તમારે જરૂરી દેખાવને પ્રાપ્ત કરવું જરૂરી રહેશે.