મૂળ ઘટકના ફોન્ટનું કદ, પિતૃ ઘટકના ફોન્ટનું કદ અને DPI વડે pxને rem, em, pt, પાઇકા, ઇંચ અને mmમાં ફેરવો. CSSમાં 1 in = 96 px = 72 pt નિશ્ચિત છે.
લેખક: AdminAI લેખન સાધનો વડે મુસદ્દો તૈયારઅપડેટ કરેલું તપાસેલાં ઉદાહરણો: 7
મૂળ તત્વનું ફોન્ટ કદ 16 px અને ઇંચદીઠ 96 પિક્સેલ હોય ત્યારે 24px એટલે 1.5rem.
| એકમ | મૂલ્ય | વ્યાખ્યા |
|---|---|---|
| પિક્સેલ (px) | 24px | 1 px |
| પોઇન્ટ (pt) | 18pt | 1 pt = 1/72 in |
| પાઇકા (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| ઇંચ (in) | 0.25in | 1 in = DPI px |
| સેન્ટિમીટર (cm) | 0.635cm | 1 cm = 1/2.54 in |
| મિલિમીટર (mm) | 6.35mm | 1 mm = 1/25.4 in |
| પા મિલિમીટર (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (પિતૃ તત્વનું ફોન્ટ કદ) | 1.5em | 1 em = parent font size |
| rem (મૂળ તત્વનું ફોન્ટ કદ) | 1.5rem | 1 rem = root font size |
| પિતૃ તત્વના ફોન્ટ કદની ટકાવારી (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS દરેક લંબાઈને પિક્સેલ મારફતે ફેરવે છે. નિરપેક્ષ એકમોનો પરસ્પર સંબંધ નિશ્ચિત છે: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q એટલે મિલિમીટરનો ચોથો ભાગ. ફોન્ટ આધારિત એકમો પૃષ્ઠ પર આધારિત છે: 1 rem મૂળ તત્વનું ફોન્ટ કદ છે; font-size ગોઠવતી વખતે 1 em (કે 100%) પિતૃતત્વનું ફોન્ટ કદ છે. મૂલ્યને પિક્સેલમાં ફેરવી, પછી લક્ષ્યના એક એકમમાં આવતા પિક્સેલથી ભાગવામાં આવે છે.
વેબ ડેવલપર ડિઝાઇનનાં પિક્સેલ કદને rem માં ફેરવે છે, જેથી લખાણ વાચકની બ્રાઉઝર ફોન્ટ પસંદગી અનુસરે: મૂળ કદ 16 px હોય ત્યારે 24 px એટલે 1.5 rem. પ્રિન્ટ ડિઝાઇનમાં પિક્સેલ પ્રતિ ઇંચનું ક્ષેત્ર વાપરો; 300 DPI પર 10 mm લોગો માટે લગભગ 118 પિક્સેલ જોઈએ. લખાણ બ્રાઉઝરની પસંદગી અનુસરે તે માટે મૂળ ફોન્ટ કદે તે પસંદગી માનવી જરૂરી છે.
CSS ઇંચ સ્ક્રીન પર માપપટ્ટીના ઇંચ જેટલો હોવો જરૂરી નથી. CSS ઇંચદીઠ 96 px નક્કી કરે છે; સંદર્ભ પિક્સેલનો દૃષ્ટિકોણ લગભગ 0.0213° છે. અમલીકરણ ભૌતિક માપ કે પિક્સેલ પર આધાર રાખી શકે છે; ઉપકરણનું મૅપિંગ, જોવાનું અંતર અને પ્રિન્ટનું સ્કેલિંગ વાસ્તવિક માપને અસર કરે છે.
સૂત્રમાં xₛ અને xₜ મૂળ તથા લક્ષ્ય મૂલ્યો છે; pₛ અને pₜ મૂળ તથા લક્ષ્યના એક એકમમાં પિક્સેલની સંખ્યા છે. આ ગુણકો તમે આપેલા ફોન્ટ કદ અને પિક્સેલ ઘનતા વાપરે છે.
rem મૂળ તત્ત્વના ફોન્ટના માપ પર આધારિત છે. નીચેના ઉદાહરણમાં તે માપ સ્પષ્ટ છે. em અને ટકાવારી માટે આ ફોર્મમાં દાખલ કરેલું પેરેન્ટ ફોન્ટ માપ વપરાય છે; વાસ્તવિક CSSમાં કઈ પ્રોપર્ટી છે તેના આધારે સંદર્ભ બદલાય છે.
rem = px ÷ root(px)
24 px ÷ 16 px = 1.5 rem
font-size માટે em પેરેન્ટ પર આધારિત છે, બીજી પ્રોપર્ટી માટે તત્ત્વના પોતાના ફોન્ટ પર. અન્ય ટકાવારી પહોળાઈ જેવા જુદા આધારની હોઈ શકે છે. અલગ pixels/in મૂલ્ય અહીં છબી અથવા પ્રિન્ટની ગણતરી માટે છે; તે CSSના નિર્ધારિત એકમોની વ્યાખ્યા બદલતું નથી.
| મૂલ્ય | મૂળ એકમ | લક્ષ્ય એકમ | સંદર્ભ | રૂપાંતરિત મૂલ્ય |
|---|---|---|---|---|
| 24 | px | rem | મૂળ ફોન્ટ 16 px | 1.5 |
| 24 | px | rem | મૂળ ફોન્ટ 20 px | 1.2 |
| 12 | pt | px | 96 પિક્સેલ/in | 16 |
| 1 | pc | pt | 96 પિક્સેલ/in | 12 |
| 100 | % | em | પેરેન્ટ ફોન્ટ 16 px | 1 |
| 10 | mm | px | 300 પિક્સેલ/in | 118.110236 |
CSS px સ્ક્રીનના એક જ ભૌતિક પિક્સેલ જેટલો હોવાની ખાતરી નથી. કોષ્ટકનો સંદર્ભ દરેક ગણતરીનો ભાગ છે. મિલીમીટરવાળી પંક્તિ ગોળ કરેલી છે; વેબ માટે સાચો ફોન્ટ સંદર્ભ અને પ્રિન્ટ માટે ઇચ્છિત રિઝોલ્યુશન વાપરો.
આધાર: W3C CSS Values and Units.
ચકાસણીનો સ્ત્રોત: ઉદાહરણની ચકાસણી: CSS Values 3 §6.1: 1rem = મૂળ તત્વનું ફોન્ટ કદ (16 px અહીં બ્રાઉઝર માટે માનેલું મૂળમાન); 24 / 16 = 1.5
ચકાસણીનો સ્ત્રોત: ઉદાહરણની ચકાસણી: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
ચકાસણીનો સ્ત્રોત: ઉદાહરણની ચકાસણી: CSS Values 3 §6.2: 1in = 96px
ચકાસણીનો સ્ત્રોત: ઉદાહરણની ચકાસણી: 1 rem = મૂળ તત્વનું ફોન્ટ કદ (16 px); 1.5 × 16
સામાન્ય મૂળભૂત કદ 16 પિક્સેલ છે. એક rem મૂળ html તત્વના ફોન્ટ કદ જેટલું છે. મુખ્ય બ્રાઉઝરમાં તે 16 px હોય છે, સિવાય કે વાચક મૂળભૂત કદ બદલે અથવા સ્ટાઇલશીટમાં html { font-size } ગોઠવાય. આ મૂળભૂત કદે html { font-size: 62.5% } કરવાથી 1 rem = 10 px થાય. W3C CSS Values and Units વિશિષ્ટતા rem વ્યાખ્યાયિત કરે છે; 16 px બ્રાઉઝરની મૂળભૂત પસંદગી છે, વ્યાખ્યાનો ભાગ નથી.
પિક્સેલને 0.75 થી ગુણો; પૉઇન્ટથી પિક્સેલ માટે 4/3 (લગભગ 1.333) થી ગુણો. બંને ગુણકો W3C CSS નિયમ 1 in = 96 px = 72 pt પરથી આવે છે, તેથી 1 px = 72/96 pt. 16 px લખાણ 12 pt જેટલું છે; વર્ડ પ્રોસેસરનું 11 pt લખાણ લગભગ 14.67 px છે.
rem હંમેશાં મૂળ તત્વના ફોન્ટ કદ પર આધારિત છે; em વર્તમાન તત્વના કદ પર, અથવા font-size માં વપરાય ત્યારે પિતૃતત્વના કદ પર આધારિત છે. એટલે માળાવાર em ગુણાય છે: 1.2em યાદીની અંદર બીજી 1.2em યાદીનું લખાણ બાહ્ય મૂળ કદથી 1.44 ગણું થાય; મૂળ કદ 16 px હોય તો ગમે તેટલી અંદર 1.2rem એટલે 19.2 px જ રહે.
લખાણ વાચકની બ્રાઉઝર ફોન્ટ પસંદગી અનુસરે તે માટે rem વાપરો. પૃષ્ઠ ઝૂમ px અને rem બંનેને મોટાં કરે છે; પરંતુ મૂળભૂત ફોન્ટ પસંદગી ફક્ત rem, em અને ટકાવારી કદ બદલે છે. WCAG 2.1 સફળતા માપદંડ 1.4.4 (સ્તર AA) મુજબ સામગ્રી કે કાર્યક્ષમતા ગુમાવ્યા વગર લખાણ 200% સુધી મોટું કરી શકાય તે જરૂરી છે. px સાથે બ્રાઉઝર ઝૂમથી તે શક્ય છે; rem ફોન્ટ પસંદગીને પણ માન આપે છે. rem, em અને ટકાવારી કદની અસર તેમના મૂળ કે પિતૃતત્વના સંદર્ભ પર આધારિત છે; મૂળ કદ વાચકની પસંદગી માનતું હોય ત્યારે જ આ અનુસરણ થાય છે.
CSS ઇંચ સ્ક્રીનના માપેલા ઇંચથી જુદો હોઈ શકે. CSS માં 1 in ચોક્કસ 96 px છે; W3Cનો સંદર્ભ પિક્સેલ 28 inથી જોવાતી 96 DPI સ્ક્રીનનો પિક્સેલ, લગભગ 0.0213° દૃષ્ટિકોણ છે. ઉપકરણનું મૅપિંગ અને અંતર બદલાતાં ફોન પર 96 pxનું ખાનું ભૌતિક ઇંચથી નાનું હોઈ શકે. વાસ્તવિક કદે પ્રિન્ટમાં 1 in = 25.4 mm માપપટ્ટી સાથે મળી શકે; પ્રિન્ટ સ્કેલિંગ અને કૅલિબ્રેશન પણ અસર કરે છે.
આ કેલ્ક્યુલેટરમાં સ્વતંત્ર સ્રોતોના જવાબો ધરાવતા 7 ઉકેલેલાં ઉદાહરણો છે. તે પરીક્ષણ સમૂહમાં ચાલે છે અને તમે અહીં પણ ચલાવી શકો છો.