vw ను px గా మార్చడం Viewport width ↔ Pixels ఉచితం ఆన్లైన్ సురక్షితం
vw లో ఒక విలువ రాయండి, అక్కడే దాన్ని px గా చదువుకోండి. లెక్క మీ బ్రౌజర్లోనే జరుగుతుంది, ఎక్కడికీ ఏదీ పంపబడదు, జవాబు దేనిమీద ఆధారపడుతుందో ఊహించకుండా కింద రాసి ఉంది.
ఏదీ అప్లోడ్ కాదు
సాధారణ పరిమాణాలు — vw ను px గా మార్చడం
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
ఈ ప్రమాణాలు ఎక్కడి నుండి వచ్చాయి
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 — చివరకు పేజీ కింది పాఠం అనుకున్నదానికి రెట్టింపు అవుతుంది.
సమాధానం ఖచ్చితమేనా?
రెండు ప్రమాణాలూ పూర్ణ సంఖ్యలతో ఒకదానినొకటి నిర్వచించే చోట అవును — పేజీ దాన్ని సంఖ్య పైనే చెబుతుంది, గుండ్రీకరణ అనేది ఎన్ని అంకెలు చూపాలి అన్నదానిలోనే ఉంటుంది. నిష్పత్తికి పరిమిత దశాంశం లేని చోట, పేజీ పన్నెండు సార్థక అంకెలు చూపి సంబంధం సుమారైనదని చెబుతుంది — వేరేలా నటించదు.
నేను టైప్ చేసేది నా పరికరం నుండి బయటకు వెళ్తుందా?
లేదు. లెక్క మీ బ్రౌజర్లోనే జరుగుతుంది; ఏదీ అప్లోడ్ కాదు, అప్లోడ్ చేయడానికి సర్వరే లేదు. పేజీని ఒకసారి తెరిస్తే, నెట్వర్క్ ఆపేసినా పనిచేస్తుంది.
మీరు vw ను px గా ఎందుకు మారుస్తారు
స్టైల్షీట్ హీరో శీర్షికపై font-size: 5.2vw, విభాగంపై margin-top: 8vw, చిత్రంపై width: 42vw అంటుంది. అవి సరళమైన విలువలు, తెరపై ఏముందో అవి చెప్పవు. ఫోన్లో శీర్షిక ఎంత పెద్దది? ల్యాప్టాప్లో చిత్రం ఎంత వెడల్పు? 1920 పిక్సెల్ల వద్ద మార్జిన్ సరిగ్గా కనిపిస్తుందా? తెలుసుకోవడానికి మీరు vw ను px గా మారుస్తారు: సంఖ్యను విండో వెడల్పుతో గుణించి వందతో భాగించి, డిజైనర్లు, టెస్టర్లు, క్లయింట్లు వాడే యూనిట్లో జవాబు చదువుతారు. ఫ్లూయిడ్ కోడ్ను సమీక్షించేటప్పుడు, బిల్డ్ను మాకప్తో తనిఖీ చేసేటప్పుడు లేదా ఇరుకైన తెరపై హెడ్డింగ్ ఎందుకు చిన్నగా కనిపిస్తుందో సహోద్యోగికి వివరించేటప్పుడు మీరు చేసేది అదే.
ఈ మార్పిడిని rem లేదా em నుంచి వేరు చేసేది గుణకం విండోనే కావడం. ఒక vw అంటే వ్యూపోర్ట్ వెడల్పులో వందో వంతు, కాబట్టి 5.2vw అంటే 1000 px వెడల్పు విండోలో 52 px, 360 px వెడల్పు ఫోన్లో 18.7 px, 1920 వెడల్పు గల పెద్ద మానిటర్లో 99.8 px. ఆశ్రయించదగిన డిఫాల్ట్ ఏదీ లేదు, పాఠకుడు ఫోన్ను తిప్పినప్పుడు లేదా విండోను లాగినప్పుడు వెడల్పు మారుతుంది. కాబట్టి కన్వర్టర్ వెడల్పును అడిగి, జవాబు పక్కన చూపి, డిజైన్లు తరచూ గీసే వెడల్పు అయిన 1440 px తో మొదలవుతుంది.
లెక్క మీ బ్రౌజర్లో జరుగుతుంది, ఏదీ అప్లోడ్ కాదు. కింద మీరు సూత్రాన్ని, మార్పిడి ఏది ఉంచుతుందో ఏది ఉంచలేదో, ఫ్లూయిడ్ స్టైల్షీట్ను అనేక వెడల్పుల వద్ద ఎలా చదవాలో, స్క్రోల్బార్ ఉచ్చును, స్వచ్ఛమైన vw లోని వచనం యొక్క అందుబాటు సమస్యను, ఫ్లూయిడ్ కోడ్ను అర్థమయ్యేలా ఉంచే కొన్ని అలవాట్లను కనుగొంటారు.
సూత్రం, వెడల్పు
px అంటే vw ను వెడల్పుతో గుణించి, వందతో భాగించినది
సూత్రం px = vw × width ÷ 100. 1440 px వెడల్పు వద్ద, 10 vw అవుతుంది 144 px, 5 vw అవుతుంది 72 px, 1.667 vw అవుతుంది 24 px. పేజీ ఫలితం పక్కన వెడల్పును ముద్రిస్తుంది, కాబట్టి 10 vw = 144 px (1440 px) వంటి వరుస ఏది భావించబడిందో చెబుతుంది. మరో తెరను చూడటానికి, వెడల్పును మార్చి ఫలితాన్ని మళ్లీ చదవండి.
ఏ వెడల్పులు ప్రయత్నించాలి
తనిఖీ చేయడానికి ఉపయోగకరమైన సమితి ఫోన్లకు 360 లేదా 390, నిలువు టాబ్లెట్కు 768, చిన్న ల్యాప్టాప్కు 1024, సాధారణ ల్యాప్టాప్ లేదా డెస్క్టాప్కు 1440, ఫుల్-HD మానిటర్కు 1920. ప్రతిదాన్ని వెడల్పు ఫీల్డ్లో టైప్ చేసి ఫలితాన్ని గమనించండి. ఐదు రీడింగ్లు ఒక విలువ మొత్తం పరిధిని చూపుతాయి, ఏ తీవ్రత అయినా కొట్టొచ్చినట్లు కనిపిస్తుంది.
అసలు విండో వెడల్పును వాడటం
మీ బ్రౌజర్ డెవలపర్ టూల్స్లో, పరికర టూల్బార్ విండో వెడల్పును పిక్సెల్లలో చూపుతుంది. పేజీ ఏం చేస్తుందో, కన్వర్టర్ ఏం చెబుతుందో పోల్చడానికి ఆ సంఖ్యను వాడండి. అవి ఏకీభవిస్తే, స్టైల్షీట్ గురించి మీ అవగాహన సరైనది.
మార్పిడి ఏం ఉంచుతుంది, ఏం ఉంచలేదు
ఇది తెరలో వాటాను ఉంచుతుంది
ఒక vw వ్యూపోర్ట్ వెడల్పులో వందో వంతు, కాబట్టి vw లో రాసిన సైజు ఉన్న చోట ఉండకుండా విండోతో పెరుగుతుంది, తగ్గుతుంది. మీకు వచ్చే పిక్సెల్ విలువ ఒక నిర్దిష్ట వెడల్పుకు ఆ వాటాను కచ్చితం చేయడం.
ఇది డిఫాల్ట్ను ఇవ్వలేదు
rem లా కాకుండా, vw కు డిఫాల్ట్ లేదు. ఎవరూ వేరేలా చెప్పనప్పుడు బ్రౌజర్ రూట్ ఫాంట్ సైజుకు 16 px ఇస్తుంది, కాబట్టి rem పేజీ నిజమైన సంఖ్య నుంచి మొదలవగలదు; వ్యూపోర్ట్ వెడల్పు పాఠకుడి విండో ఎంత వెడల్పో అంతే, ఫోన్ తిప్పినప్పుడు మారుతుంది. ఇక్కడి 1440 px డిజైన్లు తరచూ గీసే వెడల్పు, అలవాటు, ప్రమాణం కాదు. మీ సొంతాన్ని టైప్ చేయండి.
రౌండింగ్
వెడల్పుతో గుణించి 100 తో భాగించడం దశాంశాలను ఇవ్వవచ్చు. 1440 px వద్ద 6.67 vw అంటే 96.048 px. బ్రౌజర్లు భిన్న పిక్సెల్లను నిర్వహిస్తాయి, కానీ డిజైన్ ఫైల్కు మీకు పూర్ణ సంఖ్య కావాలంటే, రౌండ్ చేసి రౌండింగ్ మీదేనని గమనించండి.
ఫ్లూయిడ్ స్టైల్షీట్ను చదవడం
మూడు వెడల్పులు తీసుకుని ఫలితాలు రాయండి
ఇరుకైన, మధ్య, వెడల్పైన వెడల్పును ఎంచుకోండి, ఉదాహరణకు 375, 1024, 1920. స్టైల్షీట్లోని ప్రతి ముఖ్యమైన vw విలువకు, ప్రతి వెడల్పు వద్ద vw ను px గా మార్చి మూడు సంఖ్యలను గమనికలో రాయండి. 5.2 vw హెడ్డింగ్ 19.5, 53.2, 99.8 పిక్సెల్లను ఇస్తుంది. ఇలా చూస్తే, హెడ్డింగ్ ఇరుకైన చివర చదవగలిగేలా ఉందో, వెడల్పైన చివర అధికంగా లేదో మీకు తెలుస్తుంది.
clamp కోసం చూడండి
బాగా రాసిన ఫ్లూయిడ్ కోడ్ vw చుట్టూ clamp(min, preferred, max) తో పరిమితులు పెడుతుంది. మీరు clamp(2rem, 1rem + 4vw, 6rem) చూస్తే, సైజు 32 నుంచి 96 px మధ్య పెరిగి రెండు చివరలా నిలిచి ఉంటుంది. మీరు vw భాగాన్ని మార్చినప్పుడు, అది పరిధి మధ్యభాగం మాత్రమేనని, అంచుల వద్ద ఏమవుతుందో పరిమితులు నిర్ణయిస్తాయని గుర్తుంచుకోండి.
తీవ్రతలను తనిఖీ చేయండి
ప్రమాదకర వెడల్పులు అతి చిన్నది, అతి పెద్దది. 320 px వద్ద 6 vw హెడ్డింగ్ 19 px; 2560 వద్ద 154 px. రెండూ ఆమోదయోగ్యంగా కనిపించకపోతే, clamp లేకపోతే, స్టైల్షీట్కు పరిమితులు కావాలి.
vw ను px గా మార్చేటప్పుడు ఉచ్చులు
స్క్రోల్బార్
డెస్క్టాప్ బ్రౌజర్లలో, vw కు వాడే వ్యూపోర్ట్ వెడల్పులో నిలువు స్క్రోల్బార్ వెడల్పు చేరి ఉంటుంది. కాబట్టి పేజీ స్క్రోల్ అయినప్పుడు 100vw కనిపించే ప్రాంతం కంటే కొద్దిగా వెడల్పు, చాలా వ్యవస్థలలో సుమారు 15 నుంచి 17 పిక్సెల్లు. కాబట్టి మీరు లెక్కించే పిక్సెల్ విలువ అది సూచిస్తున్నట్లు కనిపించే వెడల్పు కంటే కొద్దిగా పెద్దది. స్క్రోల్బార్లు పేజీపై అతివ్యాప్తి చెందే ఫోన్లలో, ప్రభావం ఉండదు.
తప్పు వెడల్పు వాడటం
మీరు టైప్ చేసిన వెడల్పు ఎంత సరైనదో ఫలితం అంతే సరైనది. మీ పరీక్ష విండో 1366 px వెడల్పు ఉండి మీరు 1440 వద్ద మార్చితే, ప్రతి విలువ సుమారు ఐదు శాతం తప్పు. నిజమైన వెడల్పును డెవలపర్ టూల్స్ నుంచి చదవండి.
vw ను శాతంతో కలపడం
50% వెడల్పు పేరెంట్ వెడల్పును సూచిస్తుంది, 50vw విండోను సూచిస్తుంది. ఇరుకైన కంటైనర్ లోపల ఆ రెండూ చాలా భిన్నం. కన్వర్టర్ vw జవాబును ఇస్తుంది; మీ ఎలిమెంట్ కంటైనర్ లోపల ఉంటే, పేరెంట్ విండో కంటే ఇరుకుగా ఉండవచ్చు.
vw లోని వచనాన్ని జూమ్ చేయలేమని మరచిపోవడం
కేవలం vw లో సైజు పెట్టిన వచనం పాఠకుడు పేజీని జూమ్ చేసినప్పుడు స్పందించదు, ఎందుకంటే విండో, వచనం కలిసి స్కేల్ అవుతాయి. వచనాన్ని పునఃపరిమాణం చేయగలగాలని అందుబాటు మార్గదర్శకాలు కోరతాయి. clamp() లో లాగా rem పదాన్ని చేర్చండి, తద్వారా వచనం జూమ్కు కూడా స్పందిస్తుంది.
మార్చే ముందు ప్రజలు అడిగే ప్రశ్నలు
1 vw ఎన్ని పిక్సెల్లు?
విండో వెడల్పులో వందో వంతు: 1440 వద్ద 14.4 px, 1000 వద్ద 10 px, 360 వద్ద 3.6 px.
50 vw ఎన్ని పిక్సెల్లు?
విండోలో సగం: 1440 వెడల్పు వద్ద 720 px, 1000 వెడల్పు వద్ద 500 px.
నా పేజీ తెర కంటే వెడల్పుగా ఎందుకు ఉంది?
స్క్రోల్ అయ్యే పేజీపై 100vw పెట్టె కనిపించే ప్రాంతం కంటే వెడల్పు ఎందుకంటే స్క్రోల్బార్ లెక్కించబడుతుంది. బదులుగా కంటైనర్ లోపల 100% వాడండి.
vw శాతంతో సమానమేనా?
కాదు. శాతం పేరెంట్ను సూచిస్తుంది, vw విండోను.
నా సంఖ్య అప్లోడ్ అవుతుందా?
లేదు. అంకగణితం మీ బ్రౌజర్లో నడుస్తుంది, ఏదీ ఎక్కడికీ పంపబడదు.
తిరిగి ఎలా వెళ్లాలి?
px ను vw గా తో, అది గుణించడానికి బదులు వెడల్పుతో భాగిస్తుంది.
సాధారణ వెడల్పుల వద్ద సాధారణ విలువలు
ఒక మానసిక పట్టిక
కన్వర్టర్ను వాడే ముందు అంచనా వేయగలిగేలా కొన్ని లంగర్లు తెలుసుకోవడం సహాయపడుతుంది. 1000 px వెడల్పు వద్ద, 1 vw అంటే 10 px, ఇది అంకగణితాన్ని సులభం చేస్తుంది: 2.5 vw అంటే 25 px, 8 vw అంటే 80 px. 1440 px వద్ద, 1 vw అంటే 14.4 px. 375 px వద్ద, 1 vw అంటే 3.75 px, కాబట్టి 8 vw శీర్షిక 30 px. వేగవంతమైన తనిఖీ కోసం vw ను px గా మార్చినప్పుడు, ఈ లంగర్లలో ఒకదాని నుంచి మొదలుపెట్టి స్కేల్ చేయండి.
మూడు వెడల్పులు, ఒక స్టైల్షీట్
80vw వెడల్పు, 4vw గ్యాప్, 6vw శీర్షిక గల కార్డ్ను తీసుకోండి. 375 px ఫోన్లో అవి 300 px, 15 px, 22.5 px అవుతాయి. 768 px టాబ్లెట్లో, 614 px, 30.7 px, 46 px. 1440 px డెస్క్టాప్లో, 1152 px, 57.6 px, 86.4 px. మూడింటినీ పక్కపక్కన చూడటం డెస్క్టాప్లో కార్డ్ చాలా వెడల్పుగా, శీర్షిక చాలా పెద్దదిగా ఉందని, మీకు బహుశా గరిష్ఠ వెడల్పు, clamp కావాలని ఒక్కసారిగా చెబుతుంది.
వ్యూపోర్ట్ అవతల
కంటైనర్ యూనిట్లు
కొత్త CSS విండోకు బదులు కంటైనర్కు సంబంధించిన యూనిట్లను అందిస్తుంది, cqw వంటివి, అది కంటైనర్ వెడల్పులో వందో వంతు. ఇరుకైన సైడ్బార్లో ఉంచిన కాంపోనెంట్ మొత్తం విండో ఉన్నట్లు ప్రవర్తించే సమస్యను అవి పరిష్కరిస్తాయి. మీరు వాటిని వాడితే, అంకగణితం vw కు లాగే ఉంటుంది, కంటైనర్ వెడల్పు ఆధారం, ఆ వెడల్పును టైప్ చేసి ఈ కన్వర్టర్ను వాడవచ్చు.
చిన్న, పెద్ద, డైనమిక్ వ్యూపోర్ట్లు
ఫోన్లలో, అడ్రస్ బార్ జారిపోయినప్పుడు కనిపించే ప్రాంతం మారుతుంది. ఎత్తుల కోసం, కొత్త యూనిట్లు svh, lvh, dvh చిన్న, పెద్ద, డైనమిక్ వ్యూపోర్ట్ను వర్ణిస్తాయి. వెడల్పులకు పరిస్థితి సరళం, ఎందుకంటే అడ్రస్ బార్ దాన్ని ప్రభావితం చేయదు, vw స్థిరంగా ఉంటుంది. మొబైల్లో ఫ్లూయిడ్ డిజైన్ కోసం vh కంటే vw సురక్షిత యూనిట్ అనడానికి అది మరో కారణం.
శాతం, vw, గ్రిడ్
శాతం వెడల్పులు పేరెంట్ను అనుసరిస్తాయి, vw విండోను, CSS గ్రిడ్, ఫ్లెక్స్బాక్స్ అందుబాటులో ఉన్న స్థలాన్ని. తరచూ ఉత్తమ ఫ్లూయిడ్ లేఅవుట్లు నిర్మాణానికి గ్రిడ్, శాతాలను, వచనం, అంతరానికి మాత్రమే vw ను వాడతాయి, ఎందుకంటే అవి తెరను నేరుగా అనుసరించడం వల్ల ప్రయోజనం పొందే విషయాలు. లేఅవుట్ను తనిఖీ చేయడానికి vw ను px గా మార్చినప్పుడు, గ్రిడ్ ట్రాక్ అదే విషయాన్ని మరింత దృఢంగా చెప్పేదా అని అడగండి.
CSS రాయని వారికి vw ను వివరించడం
విండోను కొలబద్దగా వాడండి
vw అంటే తెర వెడల్పులో ఒక శాతం అని చెప్పగానే క్లయింట్లు, సహోద్యోగులు సాధారణంగా ఆలోచనను అర్థం చేసుకుంటారు. 5 vw శీర్షిక అంటే తెర వెడల్పులో ఐదు శాతం. తర్వాత వారికి రెండు సంఖ్యలు చూపండి: వారి సొంత ఫోన్లో, సమావేశ గదిలోని పెద్ద మానిటర్లో అది ఎంత అవుతుందో. రెండు వెడల్పులకు vw ను px గా మార్చి ఫలితాలను బిగ్గరగా చెప్పినప్పుడు, తెరతో కదిలే సైజు అనే ఆలోచన కచ్చితమవుతుంది.
డిజైన్ ఎందుకు స్థిరం కాదో చెప్పండి
సాంకేతికేతర భాగస్వాములు కొన్నిసార్లు శీర్షికకు ఒకే సైజు ఎందుకు ఉండకూడదని అడుగుతారు. సమాధానం ఏమిటంటే తెరలు అతి చిన్న ఫోన్కు, అతి పెద్ద మానిటర్కు మధ్య ఏడు లేదా ఎనిమిది రెట్లు తేడాతో ఉంటాయి, ఒకదానికి సరిపోయే స్థిర సైజు మరొకదానికి తప్పు. ఫ్లూయిడ్ యూనిట్లే సమాధానం, తెర అదే విలువను ఎంత మారుస్తుందో ఈ పేజీలోని పిక్సెల్ సంఖ్యలు చూపుతాయి.
ఈ యూనిట్లు ఎక్కడి నుంచి వస్తాయి
CSS పిక్సెల్
డిస్ప్లేలకు ఊహించదగిన సాంద్రత లేకుండా పోయినప్పుడు, నిజమైన పిక్సెల్లలో కొలిచిన పేజీ తెరలు పదునుగా మారే కొద్దీ కుంచించుకునే పేజీగా మారింది. కాబట్టి CSS పిక్సెల్ సూచన పొడవుగా పునర్నిర్వచించబడింది: సౌకర్యవంతమైన చదివే దూరం నుంచి చూసినప్పుడు అంగుళంలో సుమారు 1/96. ఈ పేజీ తన జవాబులను ఇచ్చే యూనిట్ అదే.
వ్యూపోర్ట్ యూనిట్లు
vw రెస్పాన్సివ్ డిజైన్తో వచ్చింది: వ్యూపోర్ట్ వెడల్పులో వందో వంతు, అది ఎంతైనా. ఇది రూట్ ఫాంట్ సైజుకు సంబంధించిన rem, ఎలిమెంట్కు సంబంధించిన em పక్కన ఉంటుంది. అదే పిక్సెల్ విలువ ఆ యూనిట్లలో ఎలా కనిపిస్తుందో చూడటానికి, rem ను px గా మార్చండి పోల్చండి.
ఫ్లూయిడ్ కోడ్ను అర్థమయ్యేలా ఉంచే అలవాట్లు
పిక్సెల్ విలువలను వ్యాఖ్యానించండి
font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ వంటి వరుసకు కొన్ని పదాలు ఖర్చవుతాయి, తర్వాతి పాఠకుడికి అనేక మార్పిడులు ఆదా చేస్తుంది.
డిజైన్ వెడల్పును ఒకే చోట ఉంచండి
మీ ప్రాజెక్ట్లో డిజైన్ గీసిన వెడల్పుకు కస్టమ్ ప్రాపర్టీ ఉంటే, ప్రతి vw విలువను దానికి వెనక్కి గుర్తించవచ్చు. సమీక్ష కోసం vw ను px గా మార్చినప్పుడు, ఏ వెడల్పు వాడాలో మీకు తెలుస్తుంది.
vw ను పొదుపుగా వాడండి
vw విలువల చిన్న జాబితా గురించి తర్కించడం సులభం. అంతా vw లో ఉన్న స్టైల్షీట్ అలా కాదు. దాన్ని డిస్ప్లే వచనం, పెద్ద గ్యాప్లు, కళాకృతి కోసం ఉంచండి.
ముఖ్యమైనప్పుడు నిజమైన పరికరాలతో పరీక్షించండి
బ్రౌజర్ సాధనాలు వెడల్పులను బాగా అనుకరిస్తాయి, కానీ నిజమైన ఫోన్ అడ్రస్ బార్లు, తిప్పడం, జూమ్ యొక్క నిజమైన ప్రవర్తనను చూపుతుంది. పరికరంపై ఐదు నిమిషాల తనిఖీ అనుకరణ తప్పిపోయేదాన్ని పట్టుకుంటుంది.
సంబంధిత కన్వర్టర్లు
ఇదే సాధన కుటుంబం పొరుగు మార్పిడులను కవర్ చేస్తుంది. తిరిగి vw కు వెళ్లడానికి, px ను vw గా వాడండి. రూట్కు సంబంధించిన సైజుల కోసం, px ను rem గా, rem ను px గా ఉన్నాయి, ఎలిమెంట్కు సంబంధించిన సైజుల కోసం, px ను em గా, em ను px గా. అదే స్టైల్షీట్ రంగుల కోసం, HEX ను RGB గా, RGB ను HEX గా సంజ్ఞామానాలను నిర్వహిస్తాయి.
పరిష్కరించిన ఉదాహరణ
హీరో శీర్షిక చిన్న ఫోన్లో చదవడం కష్టమని టెస్టర్ నివేదించారనుకోండి. స్టైల్షీట్ పరిమితులు లేకుండా font-size: 5.2vw అంటుంది. మీరు 360 వద్ద vw ను px గా మార్చి 18.7 px చదువుతారు, 768 వద్ద 39.9 px, 1440 వద్ద 74.9 px చదువుతారు. ఇరుకైన చివర శీర్షిక బాడీ వచనం కంటే కొద్దిగా పెద్దది, ఇక శీర్షికలా చదవబడదు. మీరు clamp(2rem, 1rem + 4vw, 5rem) సూచిస్తారు, అది అతి ఇరుకులో 32 px, 768 వద్ద సుమారు 51 px, అతి వెడల్పులో 5rem, 80 px, ఇస్తుంది. ఇప్పుడు అది బాగా చదవబడుతుందని టెస్టర్ నిర్ధారిస్తారు, శీర్షిక ఇంకా స్కేల్ అవుతుంది.
చిన్న చెక్లిస్ట్
మార్చే ముందు
మీరు పట్టించుకునే వెడల్పులను, డెవలపర్ టూల్స్ నుంచి లేదా మీ లక్ష్య పరికరాల జాబితా నుంచి ఎంచుకోండి.
మార్చేటప్పుడు
vw విలువను, ప్రతి వెడల్పును వరుసగా టైప్ చేసి, ఆధారం పక్కన చూపిన పిక్సెల్లను గమనించండి.
మార్చిన తర్వాత
తీవ్రతలను చూడండి. సైజు ఏ చివరనైనా చాలా చిన్నదిగా లేదా పెద్దదిగా ఉంటే, clamp() తో పరిమితులు చేర్చండి.
సాధారణ పొరపాట్లు
ఒకే జవాబు ఉందని భావించడం
vw విలువకు ప్రతి వెడల్పు వద్ద వేరే పిక్సెల్ సైజు ఉంటుంది. ప్రతి సంఖ్యతో వెడల్పును ఇవ్వండి.
స్క్రోల్బార్ను మరచిపోవడం
100vw దాన్ని చేర్చుకుంటుంది, కాబట్టి పూర్తి-వెడల్పు పెట్టె ఉప్పొంగవచ్చు.
బాడీ వచనాన్ని vw లో మాత్రమే సైజు చేయడం
దాన్ని జూమ్ చేయలేరు. rem పదాన్ని, పరిమితులను చేర్చండి.
మీ సంఖ్యలు మీ పరికరంలోనే ఉంటాయి
లెక్క స్థానికంగా జరుగుతుంది. మీ విలువలను మీ సొంత బ్రౌజర్ వాడుతుంది, ఏదీ ఎక్కడికీ పంపబడదు. తర్వాత తొలగించాల్సినది ఏదీ లేదు, సృష్టించాల్సిన ఖాతా లేదు. vw ను px గా మార్చడానికి అదే సరళమైన మార్గం.
సారాంశం
ఇక్కడ vw ను px గా మార్చడానికి, vw లో సైజును, విండో వెడల్పును టైప్ చేసి, px = vw × width ÷ 100 సూత్రాన్ని వాడి ఫలితాన్ని వెంటనే పిక్సెల్లలో చదవండి. వెడల్పు డిజైన్లు తరచూ గీసే 1440 px తో మొదలవుతుంది, కానీ అది అలవాటు, ప్రమాణం కాదు, కాబట్టి మీ సొంతాన్ని టైప్ చేయండి. మార్పిడి తెరలో వాటాను ఉంచుతుంది: ఒక vw వ్యూపోర్ట్ వెడల్పులో వందో వంతు, కాబట్టి vw లో సైజు విండోతో పెరుగుతుంది, తగ్గుతుంది. rem లా కాకుండా, vw కు డిఫాల్ట్ లేదు, ఎందుకంటే వ్యూపోర్ట్ పాఠకుడి విండో ఎంత వెడల్పో అంతే. వచనం కోసం, చదవగలిగేలా, జూమ్ చేయగలిగేలా ఉండేందుకు clamp() లోపల vw ను rem తో కలపండి. ఏదీ అప్లోడ్ కాదు.