આ ટૂલ શું કરે છે
px થી rem અને em કન્વર્ટર પિક્સેલ (px) વેલ્યુને root em (rem) અને em વેલ્યુમાં કન્વર્ટ કરે છે, અને ઊલટી દિશામાં પણ. તમે px, rem કે em — ત્રણમાંથી ગમે તે એક યુનિટમાં વેલ્યુ દાખલ કરો, અને ટૂલ બાકીના બે યુનિટમાં સમકક્ષ વેલ્યુ આપોઆપ ગણીને બતાવે છે. તમે જે ફીલ્ડ બદલો, બાકીના બે ફીલ્ડ તમે ટાઇપ કરતાં જ સાથોસાથ અપડેટ થાય છે. આ ઉપરાંત, તમારી ડિઝાઇનની જરૂરિયાત મુજબ કસ્ટમ રૂટ ફોન્ટ સાઇઝ અને em કન્ટેક્સ્ટ ફોન્ટ સાઇઝ સેટ કરી શકાય છે, જેથી કન્વર્ઝન તમારા ચોક્કસ સેટઅપ માટે સચોટ રહે.
px, rem અને em વચ્ચેનો સંબંધ
અહીં ત્રણ યુનિટ્સ કામ કરે છે. px વેલ્યુ એ સીધી ટાઇપ કરેલી પિક્સેલ સંખ્યા છે. rem વેલ્યુ "રૂટ ફોન્ટ સાઇઝ (px)" ફીલ્ડમાં સેટ કરેલી સંખ્યાના આધારે ગણાય છે, જ્યારે em વેલ્યુ "em કન્ટેક્સ્ટ ફોન્ટ સાઇઝ (px)" ફીલ્ડના આધારે ગણાય છે. શરૂઆતમાં, જ્યાં સુધી કંઈ બદલવામાં ન આવે, ત્યાં સુધી 16px બરાબર 1rem બરાબર 1em થાય છે, કારણ કે રૂટ અને કન્ટેક્સ્ટ બંને ડિફોલ્ટ રીતે 16px પર સેટ હોય છે.
રૂટ અને em કન્ટેક્સ્ટ ફોન્ટ સાઇઝ સેટ કરવી
"રૂટ ફોન્ટ સાઇઝ (px)" ફીલ્ડ એ બેઝ ફોન્ટ સાઇઝ છે જેનો ઉપયોગ rem કન્વર્ઝન માટે થાય છે; તેની ડિફોલ્ટ વેલ્યુ 16px છે. "em કન્ટેક્સ્ટ ફોન્ટ સાઇઝ (px)" ફીલ્ડ એ એલિમેન્ટની ફોન્ટ સાઇઝ છે જેનો ઉપયોગ em કન્વર્ઝન માટે થાય છે; આની ડિફોલ્ટ વેલ્યુ પણ 16px છે. બંને ફીલ્ડમાં 0 કરતાં મોટી સંખ્યા દાખલ કરવી જરૂરી છે. જો રૂટ ફોન્ટ સાઇઝ માટે અમાન્ય વેલ્યુ દાખલ કરવામાં આવે, તો "રૂટ ફોન્ટ સાઇઝ 0 કરતાં મોટી સંખ્યા હોવી જોઈએ." સંદેશ દેખાય છે. જો em કન્ટેક્સ્ટ ફોન્ટ સાઇઝ માટે અમાન્ય વેલ્યુ દાખલ કરવામાં આવે, તો "em કન્ટેક્સ્ટ ફોન્ટ સાઇઝ 0 કરતાં મોટી સંખ્યા હોવી જોઈએ." સંદેશ દેખાય છે. આ બંને ફીલ્ડ બદલવાથી પ્રોજેક્ટના વાસ્તવિક સેટઅપ સાથે મેચ કરીને સચોટ કન્વર્ઝન મળે છે.
વેલ્યુ દાખલ કરવી, પરિણામો અને સામાન્ય ટેબલ
"વેલ્યુઝ" ફીલ્ડમાં px, rem અથવા em માંની કોઈપણ લંબાઈ દાખલ કરી શકાય છે, અને નેગેટિવ પિક્સેલ વેલ્યુ પણ સ્વીકારાય છે. જો અમાન્ય વેલ્યુ દાખલ કરવામાં આવે, તો "રૂપાંતર કરવા માટે સંખ્યા દાખલ કરો." સંદેશ દેખાય છે. ફીલ્ડ પાસે આપેલો સંકેત કહે છે: "px, rem અથવા em વેલ્યુ દાખલ કરો — તમે ટાઇપ કરશો તેમ અન્ય બંને આપોઆપ અપડેટ થશે." એટલે કે ટાઇપ કરવાની સાથે જ બાકીના બે યુનિટ્સ લાઇવ અપડેટ થાય છે, અને પરિણામ મળે ત્યારે "ત્રણેય યુનિટ્સમાં રૂપાંતરિત થઈ ગયું." એવો સંદેશ દેખાય છે.
દાખલા તરીકે, રૂટ ફોન્ટ સાઇઝ 16px હોય અને વેલ્યુ તરીકે 32px દાખલ કરવામાં આવે, તો rem પરિણામ 2rem થાય છે (32 ભાગ્યા 16 બરાબર 2). એ જ રીતે, em કન્ટેક્સ્ટ ફોન્ટ સાઇઝ 16px હોય અને 24px દાખલ કરવામાં આવે, તો em પરિણામ 1.5em થાય છે (24 ભાગ્યા 16 બરાબર 1.5).
પેજ પર "સામાન્ય px → rem (16px બેઝ)" નામનું એક ટેબલ પણ છે, જે 16px રૂટ ફોન્ટ સાઇઝ ધારીને સામાન્ય રીતે વપરાતી પિક્સેલ વેલ્યુઝને rem માં કન્વર્ટ કરીને બતાવે છે. આ ટેબલથી વારંવાર વપરાતી px વેલ્યુઝ માટે જાતે ગણતરી કરવાની જરૂર રહેતી નથી.
આ ટૂલ કોના માટે ઉપયોગી છે
જેમને રિસ્પોન્સિવ ડિઝાઇન માટે નિશ્ચિત પિક્સેલ વેલ્યુને રિલેટિવ rem કે em યુનિટમાં કન્વર્ટ કરવાની જરૂર હોય, તેમના માટે આ ઉપયોગી છે. જેઓ સમજવા માંગે છે કે અલગ-અલગ રૂટ ફોન્ટ સાઇઝ rem વેલ્યુ પર કેવી અસર કરે છે, તેમના માટે પણ આ કામ આવે છે. જેમને કોઈ ચોક્કસ એલિમેન્ટની ફોન્ટ સાઇઝના આધારે em વેલ્યુ ગણવી હોય, તેમના માટે પણ આ મદદરૂપ છે. અને જેમને ખાતરી કરવી હોય કે રીડર પોતાની ડિફોલ્ટ ફોન્ટ સાઇઝ બદલે ત્યારે તેમનું સાઇઝિંગ યોગ્ય રીતે સ્કેલ થાય, તેમના માટે પણ આ ટૂલ મદદરૂપ છે.
પ્રાઇવસી
દરેક રૂપાંતરણ તમારા બ્રાઉઝરમાં જ ચાલે છે. તમે ટાઇપ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.
વારંવાર પૂછાતા પ્રશ્નો
px, rem અને em વચ્ચે શું તફાવત છે?
px એ એક નિશ્ચિત લંબાઈ છે. rem પેજના રૂટ ફોન્ટ સાઇઝના આધારે માપવામાં આવે છે, તેથી 16px રૂટ પર, 1rem બરાબર 16px થાય છે. em એ એલિમેન્ટની ફોન્ટ સાઇઝના આધારે માપવામાં આવે છે જેમાં તે રહેલું છે. rem માં સાઇઝ અને સ્પેસિંગ રાખવાથી જ્યારે યુઝર ડિફોલ્ટ ફોન્ટ સાઇઝ બદલે ત્યારે બધું યોગ્ય રીતે સ્કેલ થાય છે.
શા માટે અલગ em કન્ટેક્સ્ટ સાઇઝ હોય છે?
em એ તેના પોતાના એલિમેન્ટની ફોન્ટ સાઇઝ પર આધારિત હોય છે, જે હંમેશા રૂટ હોય તે જરૂરી નથી. em ને યોગ્ય રીતે સમજવા માટે em કન્ટેક્સ્ટને તે એલિમેન્ટની ફોન્ટ સાઇઝ પર સેટ કરો, અને જ્યારે બંને સમાન હોય ત્યારે તેને રૂટ જેટલું જ રાખો.
જો મારી રૂટ ફોન્ટ સાઇઝ 16px ન હોય તો?
તમારા CSS સાથે મેચ કરવા માટે રૂટ ફોન્ટ સાઇઝ ફીલ્ડ બદલો અને દરેક rem વેલ્યુ તરત જ અપડેટ થઈ જશે. નીચે આપેલું ટેબલ સામાન્ય 16px રૂટ માટે એક સરળ માર્ગદર્શિકા છે જેનો ઉપયોગ મોટાભાગની સાઇટ્સ કરે છે.