px ను vw గా మార్చడం Pixels ↔ Viewport width ఉచితం ఆన్‌లైన్ సురక్షితం
px లో ఒక విలువ రాయండి, అక్కడే దాన్ని vw గా చదువుకోండి. లెక్క మీ బ్రౌజర్‌లోనే జరుగుతుంది, ఎక్కడికీ ఏదీ పంపబడదు, జవాబు దేనిమీద ఆధారపడుతుందో ఊహించకుండా కింద రాసి ఉంది.
ఏదీ అప్‌లోడ్ కాదు
సాధారణ పరిమాణాలు — px ను vw గా మార్చడం
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
ఈ ప్రమాణాలు ఎక్కడి నుండి వచ్చాయి
CSSలోని పిక్సెల్ మీ తెరలోని పిక్సెల్ కాదు. తెరల సాంద్రతను ముందే ఊహించలేని స్థితి వచ్చాక, నిజమైన పిక్సెళ్ళతో కొలిచిన పేజీ — తెరలు పదునెక్కే కొద్దీ కుంచించుకుపోయే పేజీ అయిపోయింది; కాబట్టి CSS పిక్సెల్‌ను ఒక సూచన పొడవుగా మళ్ళీ నిర్వచించారు: హాయిగా చదివే దూరం నుండి చూస్తే, ఒక అంగుళంలో దాదాపు తొంభై ఆరో వంతు. ఈ పేజీలోని మిగతాదంతా దాని మీదే నిలిచి ఉంది. em వెబ్ కన్నా పాతది — సీస అక్షరాల్లో అది పోతపోసిన దిమ్మె వెడల్పు, పెద్ద M అక్షరం నుండి పేరు వచ్చింది — CSSలో అది అమల్లో ఉన్న ఫాంటు పరిమాణాన్ని సూచిస్తుంది; అందుకే మూలకాలను ఒకదానిలో ఒకటి పెట్టినప్పుడు అది మారుతుంది. సరిగ్గా దాని నుండి తప్పించుకోవడానికే rem చేర్చారు: అది మూల మూలకపు em, ఎన్నడూ పోగుపడదు. vw స్పందించే డిజైనుతో వచ్చింది: దృశ్య ప్రాంతం వెడల్పులో వందో వంతు, ఆ వెడల్పు ఎంతైనా సరే.
ఇవి మీకు ఎక్కడ ఎదురవుతాయి
ఇవి ప్రతి స్టైల్‌షీటు ప్రమాణాలు. పిక్సెళ్ళు అంచులను, నీడలను, పెరగకూడని ప్రతిదాన్నీ కొలుస్తాయి; rem అక్షరాలను, ఖాళీలను, అమరికను కొలుస్తుంది — మూలం వద్ద ఒక్క మార్పుతో మొత్తం ఇంటర్‌ఫేసు పరిమాణం మారిపోతుంది; em తన సొంత పాఠాన్ని అనుసరించవలసిన వాటిని కొలుస్తుంది, ఉదాహరణకు ఒక బొత్తాము లోపలి ఖాళీ; vw ఏ పరికరంలోనైనా తెరను నింపవలసిన శీర్షికలను, ఆరంభ భాగాలను కొలుస్తుంది. వీటి మధ్య మార్పిడే, పిక్సెళ్ళలో అందించిన డిజైనును సాగే స్టైల్‌షీటుగా మార్చే రోజువారీ లెక్క.
తరచుగా అడిగే ప్రశ్నలు
16 px ఎందుకు మామూలు ఆరంభ బిందువు?
ఎందుకంటే ప్రధాన బ్రౌజర్లన్నిటిలో పాఠానికి అప్రమేయ పరిమాణం అదే; దాన్ని మార్చని స్టైల్‌షీటు దాన్నే వారసత్వంగా పొందుతుంది. కాబట్టి అప్రమేయ అమరికలో ఒక rem అంటే 16 px; సుపరిచితమైన మార్పిడులు అక్కడి నుండే వస్తాయి: 0.5 rem అంటే 8 px, 1.5 rem అంటే 24 px. వాడేవారు బ్రౌజర్ అమరికల్లో అప్రమేయ పరిమాణాన్ని పెంచుకుని ఉంటే, అవే rem విలువలూ దానితో పాటు పెరుగుతాయి — వాటిని వాడటంలోని ఉద్దేశం సరిగ్గా అదే.
rem వాడాలా, em వాడాలా?
పేజీ మొత్తాన్ని అనుసరించవలసిన ప్రతిదానికీ rem — అక్షర పరిమాణాల మెట్లు, ఖాళీలు, అమరిక వెడల్పులు — ఎందుకంటే అది మూలం నుండి కొలవబడుతుంది, ఎన్నడూ పోగుపడదు. తాను ఉన్న పాఠాన్ని అనుసరించవలసిన ప్రతిదానికీ em: ఒక బొత్తాము లోపలి ఖాళీ, ఒక చిహ్నం పక్కనున్న సందు, ఒక ఉల్లేఖనం లోపలికి జరగడం. మామూలు పొరపాటు ఏమిటంటే emలో కొలిచిన మూలకాలను ఒకదానిలో ఒకటి పెట్టడం: 1.2 em లోపలి 1.2 em అన్నది 1.44 అవుతుంది, తరువాత 1.73 — చివరకు పేజీ కింది పాఠం అనుకున్నదానికి రెట్టింపు అవుతుంది.
సమాధానం ఖచ్చితమేనా?
రెండు ప్రమాణాలూ పూర్ణ సంఖ్యలతో ఒకదానినొకటి నిర్వచించే చోట అవును — పేజీ దాన్ని సంఖ్య పైనే చెబుతుంది, గుండ్రీకరణ అనేది ఎన్ని అంకెలు చూపాలి అన్నదానిలోనే ఉంటుంది. నిష్పత్తికి పరిమిత దశాంశం లేని చోట, పేజీ పన్నెండు సార్థక అంకెలు చూపి సంబంధం సుమారైనదని చెబుతుంది — వేరేలా నటించదు.
నేను టైప్ చేసేది నా పరికరం నుండి బయటకు వెళ్తుందా?
లేదు. లెక్క మీ బ్రౌజర్‌లోనే జరుగుతుంది; ఏదీ అప్‌లోడ్ కాదు, అప్‌లోడ్ చేయడానికి సర్వరే లేదు. పేజీని ఒకసారి తెరిస్తే, నెట్‌వర్క్ ఆపేసినా పనిచేస్తుంది.
px ను vw గా ఎందుకు మార్చాలి
డిజైనర్ 1440 px వెడల్పుతో గీసిన మాక్‌అప్‌ను పంపుతాడు, అందులో 96 px హీరో హెడ్డింగ్, 72 px సెక్షన్ గ్యాప్ ఉంటాయి. నిజమైన వెబ్‌లో ఆ పేజీని ఫోన్‌లో 360 px వద్ద, టాబ్లెట్‌లో 820 px వద్ద, పెద్ద మానిటర్‌లో 2560 px వద్ద చూస్తారు, వాటిలో ప్రతిదానిలో హెడ్డింగ్ స్క్రీన్‌కు తన అనుపాతాన్ని నిలుపుకోవాలని డిజైనర్ కోరుకుంటాడు. దానికోసం తయారైన యూనిట్ వ్యూపోర్ట్ వెడల్పు, vw, మాక్‌అప్ నుంచి అక్కడికి చేరే మార్గం px ను vw గా మార్చడం: పిక్సెల్ విలువను తీసుకుని, డిజైన్ గీసిన వెడల్పుతో భాగించి, వందతో గుణించండి. 1440 px కాన్వాస్‌పై 96 px హెడ్డింగ్ 6.67 vw, అప్పటి నుంచి స్క్రీన్ ఎంత ఉన్నా అది ఎల్లప్పుడూ దానిలో 6.67 శాతం.
వ్యూపోర్ట్ యూనిట్ వాగ్దానం అదే, ప్రమాదం కూడా. rem, em ఫాంట్ పరిమాణం నుంచి మొదలవుతాయి, దాన్ని బ్రౌజర్ సహేతుకమైన డిఫాల్ట్‌కు సెట్ చేస్తుంది. vw కు అసలు డిఫాల్ట్ లేదు: వ్యూపోర్ట్ వెడల్పు అంటే పాఠకుడి విండో ఎంత వెడల్పు ఉంటే అంతే, వారు ఫోన్‌ను తిప్పినప్పుడు లేదా విండోను లాగినప్పుడు అది మారుతుంది. కాబట్టి సమాధానం ఆధారపడే ఒక్క సంఖ్యను కన్వర్టర్ దాచదు. డిజైన్ వెడల్పు ఒక ఫీల్డ్‌లో 1440 px వద్ద మొదలవుతుంది, మీ మాక్‌అప్‌కు సరిపోయేలా మార్చవచ్చు.
లెక్క మీ బ్రౌజర్‌లో నడుస్తుంది, ఏదీ అప్‌లోడ్ కాదు. కింద మీకు ఫార్ములా, మార్పిడి ఏమి ఉంచుతుంది, ఏమి ఉంచలేదు, వ్యూపోర్ట్ యూనిట్లు ఎక్కడ సహాయపడతాయి, ఎక్కడ హాని చేస్తాయి, స్వచ్ఛమైన vw వచనం సృష్టించే అందుబాటు సమస్య, దాన్ని సరిచేసే క్లాంప్ పద్ధతి, పిక్సెల్ మాక్‌అప్‌ను ద్రవ స్టైల్‌షీట్‌గా మార్చే పద్ధతి కనిపిస్తాయి.
ఫార్ములా, వెడల్పు
vw = px ను వెడల్పుతో భాగించి, వందతో గుణించినది
ఫార్ములా vw = px ÷ width × 100. డిజైన్ వెడల్పు 1440 px తో, 144 px సైజు 10 vw అవుతుంది, 72 px 5 vw అవుతుంది, 24 px 1.667 vw అవుతుంది. పేజీ ఫలితం పక్కన వెడల్పును చూపుతుంది, 144 px = 10 vw (1440 px) లాగా, తద్వారా ఏది ఊహించబడిందో మీరు చూడవచ్చు. ఒక vw అంటే వ్యూపోర్ట్ వెడల్పులో వందో వంతు, కాబట్టి 1000 px వెడల్పు విండోలో 1 vw అంటే 10 px.
1440 ఎక్కడ నుంచి వస్తుంది
ఇక్కడ 1440 px అనేది డిజైన్లు తరచూ గీసే వెడల్పు, అది అలవాటు, ప్రమాణం కాదు. కొన్ని బృందాలు 1280 వద్ద, చాలా మంది 1920 వద్ద, మొబైల్ డిజైన్లు 375 లేదా 390 వద్ద గీస్తారు. సరైన సమాధానం లేదు, మీ డిజైన్ ఫైల్ వాడే వెడల్పు మాత్రమే. మీ స్వంతది టైప్ చేయండి: మార్పిడి మీరిచ్చిన వెడల్పంత మంచిదే.
డిజైన్ సొంత వెడల్పును వాడటం
మాక్‌అప్ 1920 px వద్ద గీస్తే, 1920 టైప్ చేయండి, అదే 96 px హెడ్డింగ్ 5 vw అవుతుంది. తప్పు వెడల్పు వాడి px ను vw గా మారిస్తే, పేజీ ఒక స్క్రీన్ సైజులో సరిగ్గా, మిగతా అన్నింటిలో తప్పుగా కనిపిస్తుంది, ఎక్కడ చూడాలో తెలియనప్పుడు ఇది అయోమయపరిచే బగ్.
మార్పిడి ఏమి ఉంచుతుంది, ఏమి ఉంచలేదు
స్క్రీన్ వాటాను ఉంచుతుంది
ఒక vw అంటే వ్యూపోర్ట్ వెడల్పులో వందో వంతు, కాబట్టి vw లో రాసిన సైజు ఒకే చోట ఉండకుండా విండోతో పెరుగుతుంది, తగ్గుతుంది. ఫలితం అంటే మీ మాక్‌అప్‌లో ఆ పిక్సెల్ విలువ ఆక్రమించిన స్క్రీన్ వాటా, బ్రౌజర్‌లో ఎలిమెంట్ ప్రతి వెడల్పు వద్ద ఆ వాటాను నిలుపుకుంటుంది.
డిఫాల్ట్‌ను ఇవ్వలేదు
rem లా కాకుండా, vw కు డిఫాల్ట్ లేదు. ఎవరూ ఏమీ చెప్పనప్పుడు బ్రౌజర్ రూట్ ఫాంట్ పరిమాణాన్ని 16 px గా ఇస్తుంది, కాబట్టి rem పేజీ నిజమైన సంఖ్య నుంచి మొదలవగలదు; వ్యూపోర్ట్ వెడల్పు అంటే పాఠకుడి విండో ఎంత వెడల్పు ఉంటే అంతే, వారు ఫోన్‌ను తిప్పినప్పుడు అది మారుతుంది. ఫీల్డ్‌లోని వెడల్పు మీ డిజైన్ వెడల్పు, ఆ వెడల్పు స్క్రీన్‌కు సమాధానం సరైనది, మిగతా చోట్ల అనుపాతంలో ఉంటుంది.
రౌండింగ్
1440 తో భాగించడం చాలా సైజులకు పొడవైన దశాంశాలను ఇస్తుంది. 6.6667 vw వంటి విలువ స్టైల్‌షీట్‌లో సరే, కానీ కనిపించే మార్పు లేకుండా 6.67 లేదా 6.7 కు గుండ్రం చేయవచ్చు. చుక్క తర్వాత రెండు లేదా మూడు అంకెలు ఉంచండి; ఎక్కువ శబ్దం మాత్రమే.
వ్యూపోర్ట్ యూనిట్లు ఎక్కడ సహాయపడతాయి
హీరో హెడ్డింగ్‌లు, పెద్ద డిస్‌ప్లే అక్షరాలు
ప్రతి పరికరంలో స్క్రీన్‌లో నిర్దిష్ట వాటాను నింపాల్సిన హెడ్డింగ్ సంప్రదాయ వినియోగం. ఫోన్ వెడల్పు వద్ద స్థిర 96 px హెడ్డింగ్ పొంగిపోతుంది; vw లో అది స్క్రీన్‌తో కుంచించుకుని ఒకే పంక్తిలో ఉంటుంది.
పూర్తి-వెడల్పు సెక్షన్లు
ల్యాండింగ్ పేజీలోని పెద్ద సెక్షన్ల మధ్య ఖాళీ స్క్రీన్‌తో స్కేల్ అయినప్పుడు తరచూ ఉత్తమంగా కనిపిస్తుంది, తద్వారా చిన్న ల్యాప్‌టాప్‌లో, వెడల్పాటి డిస్‌ప్లేలో పేజీ తన లయను నిలుపుకుంటుంది. vw లో గ్యాప్‌లు అది చేస్తాయి.
ఆకారం నిలుపుకోవాల్సిన కళాకృతులు
vw లో సైజు చేసిన హీరో చిత్రాలు, ఇలస్ట్రేషన్‌లు, అలంకార ఆకారాలు విండోకు తమ అనుపాతాలను నిలుపుకుంటాయి, కాబట్టి స్క్రీన్ మారినప్పుడు కూర్పు చెదిరిపోదు.
పరిమితులతో ద్రవ అక్షరాలు
clamp() తో కలిపితే, vw కనిష్ఠ, గరిష్ఠ విలువల మధ్య సాఫీగా పెరిగే అక్షరాలను ఇస్తుంది. ఆధునిక స్టైల్‌షీట్‌లు హెడ్డింగ్‌ల కోసం వాడే పద్ధతి ఇదే, దీని గురించి కింద వివరించబడింది.
వ్యూపోర్ట్ యూనిట్లు ఎక్కడ హాని చేస్తాయి
స్వచ్ఛమైన vw లో బాడీ వచనం
vw లో మాత్రమే సైజు చేసిన వచనం, పాఠకుడు బ్రౌజర్‌లో పేజీని జూమ్ చేసినప్పుడు స్పందించదు, ఎందుకంటే జూమ్ విండో పిక్సెల్ పరిమాణాన్ని మారుస్తుంది కానీ vw సైజు దానిలో తన వాటాను నిలుపుకుంటుంది. తరచూ కంటి చూపు సరిగా లేకపోవడం వల్ల జూమ్‌పై ఆధారపడేవారికి పెద్దది చేయలేని వచనం మిగులుతుంది. అందుబాటు మార్గదర్శకాలు వచనం పరిమాణం మార్చగలగాలని కోరతాయి, స్వచ్ఛమైన vw సైజు ఆ పరీక్షలో విఫలమవుతుంది.
చాలా చిన్న, చాలా పెద్ద చివరలు
320 px వెడల్పు వద్ద 6.67 vw హెడ్డింగ్ 21 px, అది చాలా చిన్నది కావచ్చు. 2560 px వెడల్పు వద్ద అది 171 px, అది అపారం. పరిమితులు లేకపోతే, 1440 వద్ద సరైనదిగా కనిపించిన అనుపాతం చివరల వద్ద అసంబద్ధంగా ఉండవచ్చు.
స్క్రోల్‌బార్
డెస్క్‌టాప్ బ్రౌజర్‌లలో, vw కోసం వాడే వ్యూపోర్ట్ వెడల్పులో నిలువు స్క్రోల్‌బార్ వెడల్పు కలిసి ఉంటుంది. కాబట్టి పేజీ స్క్రోల్ అయినప్పుడు 100vw గా సెట్ చేసిన బాక్స్ కనిపించే ప్రాంతం కంటే కొంచెం వెడల్పుగా ఉంటుంది, అడ్డం స్క్రోల్‌బార్ కనిపించవచ్చు. vw తో పూర్తి-వెడల్పు లేఅవుట్ నిర్మించే ముందు ఇది తెలుసుకోండి.
క్లాంప్ పద్ధతి
నేల, పైకప్పు నిర్ణయించడం
CSS ఫంక్షన్ clamp(min, preferred, max) కనిష్ఠం, ప్రాధాన్య విలువ, గరిష్ఠం తీసుకుంటుంది. అక్షరాలకు, కనిష్ఠం, గరిష్ఠం rem లో, ప్రాధాన్య విలువ vw తో పాటు rem పదంతో రాయండి: font-size: clamp(2rem, 1rem + 4vw, 6rem). సైజు 32, 96 px మధ్య విండోతో పెరుగుతుంది, ఏ చివర దాటి పోదు. దానిలో కొంత భాగం rem లో ఉన్నందున, వచనం ఇప్పటికీ పాఠకుడి సెట్టింగ్‌లను గౌరవిస్తుంది.
మధ్య పదాన్ని ఎలా నిర్మించాలి
రెండు స్క్రీన్ వెడల్పులను, వాటిలో ప్రతిదాని వద్ద మీకు కావలసిన సైజులను ఎంచుకోండి. ఉదాహరణకు 360 px వెడల్పు వద్ద 32 px, 1440 px వెడల్పు వద్ద 96 px. వాలు (96 − 32) ÷ (1440 − 360) = 0.0593 వెడల్పు px కు px, అంటే 5.93 vw, ఖండన 32 − 0.0593 × 360 = 10.67 px, సుమారు 0.667 rem. కాబట్టి ప్రాధాన్య పదం 0.667rem + 5.93vw. vw భాగానికి కన్వర్టర్ సహాయపడుతుంది, మిగతాది ఒక నిమిషం లెక్క చేస్తుంది.
ఇది సరైన సమతుల్యత ఎందుకు
clamp తో, డిజైనర్లు కోరుకునే ద్రవ ప్రవర్తన, పాఠకులకు అవసరమైన అందుబాటు రెండూ మీకు వస్తాయి. పైన వివరించిన ఇబ్బందికి ఇదే సమాధానం, చాలా ఆధునిక స్టైల్‌షీట్‌లు clamp లోపల మాత్రమే vw వాడటానికి కారణం.
ఇక్కడ px ను vw గా ఎలా మార్చాలి
పిక్సెల్ విలువను టైప్ చేయండి
మొదటి ఫీల్డ్‌లో పిక్సెల్‌లలో సైజును నమోదు చేయండి. దశాంశాలు అంగీకరించబడతాయి.
డిజైన్ వెడల్పును సెట్ చేయండి
అది మీ మాక్‌అప్ వెడల్పు అయితే 1440 వద్ద ఉంచండి. కాకపోతే, మార్చండి. మీరు టైప్ చేస్తుండగా ఫలితం నవీకరించబడుతుంది.
vw విలువను కాపీ చేయండి
సంఖ్యను యూనిట్‌తో మీ CSS లో వాడండి, font-size: 6.67vw లాగా. వచనానికి, దాన్ని rem లో పరిమితులతో పాటు clamp() లోపల ఉంచండి.
ఈ యూనిట్లు ఎక్కడ నుంచి వచ్చాయి
CSS పిక్సెల్
డిస్‌ప్లేలకు ఊహించదగిన సాంద్రత లేకుండా పోయినప్పుడు, నిజమైన పిక్సెల్‌లలో కొలిచిన పేజీ స్క్రీన్‌లు పదునెక్కే కొద్దీ కుంచించుకుపోయే పేజీ అయింది. కాబట్టి CSS పిక్సెల్‌ను రిఫరెన్స్ పొడవుగా తిరిగి నిర్వచించారు: సౌకర్యవంతమైన చదివే దూరం వద్ద చూసే అంగుళంలో సుమారు 1/96. మీ మాక్‌అప్ గీసే యూనిట్ అదే.
వ్యూపోర్ట్ యూనిట్లు
vw ప్రతిస్పందించే డిజైన్‌తో వచ్చింది: వ్యూపోర్ట్ వెడల్పులో వందో వంతు, అది ఎంతైనా. అది రూట్ ఫాంట్ పరిమాణానికి సాపేక్షమైన rem, ఎలిమెంట్‌కు సాపేక్షమైన em పక్కన ఉంటుంది. స్క్రీన్‌కు బదులు వచనానికి సాపేక్ష సైజులు కావాలంటే, px ను rem గా మార్చండి.
px ను vw గా మార్చేటప్పుడు ఉచ్చులు
తప్పు డిజైన్ వెడల్పు వాడటం
అత్యంత సాధారణ పొరపాటు. మీ మాక్‌అప్ 1920 వెడల్పు ఉండి 1440 తో మారిస్తే, ప్రతి సైజు మూడో వంతు తప్పుతుంది. మీ డిజైన్ సాధనంలో ఫ్రేమ్ వెడల్పును నిర్ధారించుకోండి.
మొబైల్ డిజైన్‌ను మరచిపోవడం
చాలా బృందాలకు రెండు మాక్‌అప్‌లు ఉంటాయి, ఒకటి డెస్క్‌టాప్‌కు, ఒకటి ఫోన్‌కు. మొదటిదానిలో 96 px, రెండవదానిలో 40 px ఉన్న హెడ్డింగ్ ఒకే vw విలువ కాదు. రెండు వెడల్పులు, రెండు మార్పిడులు, వాటిని కలపడానికి clamp వాడండి.
మొత్తం పేజీని vw లో పెట్టడం
ప్రతిదీ విండోతో స్కేల్ అయ్యే పేజీ చదివే భావనను కోల్పోతుంది: వెడల్పాటి స్క్రీన్‌లపై పంక్తులు చాలా పొడవవుతాయి, ఇరుకైన వాటిపై వచనం చాలా చిన్నదవుతుంది. స్కేల్ కావాల్సిన కొద్ది వాటికి vw, మిగతా వాటికి స్థిర లేదా rem సైజులు వాడండి.
జూమ్ సమస్యను విస్మరించడం
మీ పేజీని బ్రౌజర్ 200 శాతం జూమ్‌లో పరీక్షించండి. వచనం పెరగకపోతే, సైజులకు rem పదం అవసరం.
మార్చే ముందు ప్రజలు అడిగే ప్రశ్నలు
100 px అంటే ఎన్ని vw?
1440 px డిజైన్ వెడల్పు వద్ద, సుమారు 6.94 vw.
వాడటానికి ఉత్తమ డిజైన్ వెడల్పు ఏది?
మీ మాక్‌అప్ గీసినది. సార్వత్రిక డిఫాల్ట్ లేదు.
vw, rem కంటే మంచిదా?
అవి వేర్వేరు పనులు చేస్తాయి. rem పాఠకుడి వచనం పరిమాణాన్ని అనుసరిస్తుంది; vw విండోను అనుసరిస్తుంది. ప్రతిదాన్ని అది దేనిలో మంచిదో దానికి వాడండి.
ఫాంట్ పరిమాణానికి vw వాడవచ్చా?
అవును, కానీ వచనం చదవగలిగేలా, ఇంకా జూమ్ చేయగలిగేలా దాన్ని rem లో పరిమితులతో clamp() లోపల ఉంచండి.
నా సంఖ్య అప్‌లోడ్ అవుతుందా?
లేదు. లెక్క మీ బ్రౌజర్‌లో నడుస్తుంది, ఏదీ ఎక్కడికీ పంపబడదు.
తిరిగి ఎలా వెళ్లాలి?
vw ను px గా వాడండి, అది భాగించడానికి బదులు వెడల్పుతో గుణిస్తుంది.
px ను vw గా మార్చేటప్పుడు తెలివిగా ఎంచుకోవడం
స్క్రీన్‌తో ఏది స్కేల్ కావాలో నిర్ణయించండి
హీరో అక్షరాలు, పెద్ద గ్యాప్‌లు, కళాకృతులు: అవును. బాడీ వచనం, అంచులు, చిన్న నియంత్రణలు: కాదు. మీ vw విలువల జాబితా ఎంత చిన్నదైతే, పేజీ అంత దృఢంగా ఉంటుంది.
డిజైన్ దశలో మార్చండి
మాక్‌అప్ చదువుతూనే px ను vw గా మారిస్తే, ఏ విలువలు బేసిగా వస్తాయో వెంటనే చూసి, డిజైనర్‌ను చక్కని వాటి కోసం అడగవచ్చు. 6.6667 vw గా తేలిన హెడ్డింగ్ దాన్ని 6.5 లేదా 7 చేయడం గురించి సంభాషణను ఆహ్వానిస్తుంది.
వెడల్పు రికార్డు ఉంచండి
డిజైన్ వెడల్పును స్టైల్‌షీట్ పైన కామెంట్‌లో రాయండి, తర్వాత మార్చే ఎవరైనా అదే వాడేలా. కలగలిసిన వెడల్పులు ఎవరూ సరిగ్గా వివరించలేని విధంగా అస్థిరమైన పేజీని ఉత్పత్తి చేస్తాయి.
మాక్‌అప్ నుంచి ద్రవ స్టైల్‌షీట్ వరకు
స్కేల్ కావాల్సిన సైజులను జాబితా చేయండి
డిజైన్ ఫైల్ తెరిచి, స్క్రీన్‌ను అనుసరించాలని మీరు కోరుకునే ప్రతి సైజును రాయండి: హీరో టైటిల్, సెక్షన్ గ్యాప్‌లు, బహుశా పెద్ద ఇలస్ట్రేషన్. వాటిలో ప్రతిదానికి, ఫ్రేమ్ వెడల్పుకు వ్యతిరేకంగా px ను vw గా మార్చి, ఫలితాన్ని నోట్ చేయండి. చాలా పేజీలలో అలాంటి విలువలు పది కంటే తక్కువ ఉంటాయి, మిగతావన్నీ rem లో లేదా పిక్సెల్‌లలో ఉంటాయి.
మొబైల్ ఫ్రేమ్‌ను విడిగా తనిఖీ చేయండి
ఫోన్ మాక్‌అప్ ఉంటే, అదే ఎలిమెంట్‌లను దాని వెడల్పు వద్ద చదవండి. 1440 px ఫ్రేమ్‌పై 96 px, 375 px ఫ్రేమ్‌పై 40 px ఉన్న టైటిల్ ఏ ఒక్క vw విలువకూ సరిపోదు, అది clamp వాడమనే సంకేతం: ఫోన్ సైజు నేల అవుతుంది, డెస్క్‌టాప్ సైజు పైకప్పు అవుతుంది, vw పదం మధ్యలో పని చేస్తుంది. ప్రతి ఫ్రేమ్‌కు px ను vw గా మార్చినప్పుడు, రెండు సంఖ్యలు వాలును నిర్వచిస్తాయి.
మూడు వెడల్పుల వద్ద సమీక్షించండి
పూర్తయిన పేజీని సుమారు 360, 820, 1440 పిక్సెల్‌ల వద్ద, ఒకసారి 2560 వద్ద చూడండి. ద్రవ లేఅవుట్‌లను మాక్‌అప్ వెడల్పు వద్ద సరిగ్గా చేయడం సులభం, మిగతా చోట్ల సూక్ష్మంగా తప్పుగా ఉంటాయి, ఈ వెడల్పుల గుండా చిన్న పరిశీలన సందర్శకుడు కనుగొనే ముందే చాలా సమస్యలను కనుగొంటుంది.
పొడవైన వచనం నుంచి యూనిట్‌ను దూరంగా ఉంచండి
చదివే వచనం పంక్తులను rem లో సైజు చేసి, గరిష్ఠ పంక్తి పొడవు సుమారు 60 నుంచి 75 అక్షరాలు ఇవ్వడం ఉత్తమం. డిస్‌ప్లే అక్షరాలకు, ఖాళీకి వ్యూపోర్ట్ యూనిట్ వాడండి, చదివే వచనం స్థిరంగా ఉండనివ్వండి.
సంబంధిత కన్వర్టర్‌లు
ఇదే సాధన కుటుంబం పొరుగు మార్పిడులను కవర్ చేస్తుంది. తిరిగి పిక్సెల్‌లకు వెళ్లడానికి, vw ను px గా వాడండి. రూట్‌కు సాపేక్ష సైజుల కోసం, px ను rem గా, rem ను px గా ఉన్నాయి, ఎలిమెంట్‌కు సాపేక్ష సైజుల కోసం px ను em గా, em ను px గా. అదే స్టైల్‌షీట్‌లోని రంగుల కోసం, HEX ను RGB గా, HEX ను HSL గా సంకేతాలను నిర్వహిస్తాయి.
పరిష్కరించిన ఉదాహరణ
ల్యాండింగ్ పేజీని 1440 px వద్ద డిజైన్ చేశారనుకోండి, 96 px హీరో టైటిల్, దాని పైన 72 px గ్యాప్‌తో. మీరు 96 టైప్ చేసి 6.667 vw చదువుతారు, 72 టైప్ చేసి 5 vw చదువుతారు. 1000 px విండోలో టైటిల్ 66.7 px, గ్యాప్ 50 px, అనుపాతంలో. కానీ 360 px వెడల్పు ఫోన్‌లో టైటిల్ 24 px అవుతుంది, అది మీరు కోరుకునే దానికంటే చిన్నది, కాబట్టి టైటిల్‌ను clamp(2.25rem, 1rem + 5vw, 6rem) గా రాస్తారు, 36 px నేల, 96 px పైకప్పు ఇస్తుంది, అది చదవగలిగేలా, జూమ్ చేయగలిగేలా ఉంటుంది. వచనం లేని గ్యాప్ సాదా vw లోనే ఉంటుంది.
చిన్న చెక్‌లిస్ట్
మార్చే ముందు
మాక్‌అప్ వెడల్పును కనుగొనండి. ఏ సైజులు స్కేల్ కావాలో, ఏవి కాకూడదో నిర్ణయించండి.
మార్చేటప్పుడు
పిక్సెల్ విలువను, డిజైన్ వెడల్పును టైప్ చేసి, vw సంఖ్యను యూనిట్‌తో కాపీ చేయండి.
మార్చిన తర్వాత
విండోను ఫోన్ వెడల్పు నుంచి వెడల్పాటి మానిటర్ వరకు మార్చి, పేజీని 200 శాతం జూమ్ చేయండి. చివరలు తప్పుగా కనిపించిన చోటల్లా clamp() తో పరిమితులు జోడించండి.
సాధారణ పొరపాట్లు
1440 ప్రమాణం అనుకోవడం
అది కేవలం అలవాటు. మీ స్వంత వెడల్పు వాడండి.
బాడీ వచనాన్ని vw లో మాత్రమే సైజు చేయడం
దాన్ని జూమ్ చేయలేరు. rem పదాన్ని, పరిమితులను జోడించండి.
స్క్రోల్‌బార్‌ను మరచిపోవడం
స్క్రోల్ అయ్యే డెస్క్‌టాప్ పేజీలలో 100vw కనిపించే ప్రాంతం కంటే వెడల్పుగా ఉంటుంది.
మీ సంఖ్యలు మీ పరికరంలోనే ఉంటాయి
లెక్క స్థానికంగా జరుగుతుంది. మీ విలువలను మీ బ్రౌజరే వాడుతుంది, ఏదీ ఎక్కడికీ పంపబడదు. తర్వాత తొలగించడానికి ఏమీ లేదు, సృష్టించడానికి ఖాతా లేదు. px ను vw గా మార్చడానికి అదే సరళమైన మార్గం.
సారాంశం
ఇక్కడ px ను vw గా మార్చడానికి, పిక్సెల్‌లలో సైజును, మీ డిజైన్ వెడల్పును టైప్ చేసి, vw = px ÷ width × 100 ఫార్ములాతో ఫలితాన్ని వెంటనే చదవండి. వెడల్పు 1440 px వద్ద మొదలవుతుంది, డిజైన్లు తరచూ గీసే వెడల్పు, కానీ అది అలవాటు, ప్రమాణం కాదు, కాబట్టి మీ స్వంతది టైప్ చేయండి. మార్పిడి స్క్రీన్ వాటాను ఉంచుతుంది: ఒక vw అంటే వ్యూపోర్ట్ వెడల్పులో వందో వంతు, కాబట్టి vw లో సైజు విండోతో పెరుగుతుంది, తగ్గుతుంది. rem లా కాకుండా, vw కు డిఫాల్ట్ లేదు, ఎందుకంటే వ్యూపోర్ట్ అంటే పాఠకుడి విండో ఎంత వెడల్పు ఉంటే అంతే. వచనానికి, అది చదవగలిగేలా, జూమ్ చేయగలిగేలా ఉండటానికి clamp() లోపల vw ను rem తో కలపండి. ఏదీ అప్‌లోడ్ కాదు.