వాక్యనిర్మాణం రెండు వెడల్పు మరియు గరిష్ట-వెడల్పు మీడియా ప్రశ్నలకు
ప్రతిస్పందించే వెబ్ డిజైన్ ఆ పేజీలను డైనమిక్ మీ సందర్శకుల స్క్రీన్ పరిమాణం ఆధారంగా వారి లేఅవుట్ మరియు ప్రదర్శనను మార్చగల వెబ్పేజీలను నిర్మించడానికి ఒక విధానం. పెద్ద స్క్రీన్లు ఆ పెద్ద ప్రదర్శనలకు సరిపోయే లేఅవుట్ను పొందగలవు, చిన్న పరికరాలు మొబైల్ ఫోన్ల వంటివి, చిన్న స్క్రీన్కు సరిపోయే పద్ధతిలో ఫార్మాట్ చేయబడిన అదే వెబ్సైట్ను పొందవచ్చు. ఈ విధానం వినియోగదారులందరికి మెరుగైన వినియోగదారు అనుభవాన్ని అందిస్తుంది మరియు శోధన ఇంజిన్ ర్యాంక్లను మెరుగుపరచడంలో కూడా ఇది సహాయపడుతుంది. ప్రతిస్పందించే వెబ్ డిజైన్ యొక్క ముఖ్యమైన భాగం CSS మీడియా ప్రశ్నలు.
మీడియా ప్రశ్నలు మీ వెబ్సైట్ యొక్క CSS ఫైల్ లోపల కొద్దిగా నియత ప్రకటనలు వంటివి, మీరు నిర్దిష్ట CSS నియమాలను సెట్ చేయడానికి అనుమతించడం వలన కొన్ని పరిస్థితులు ఏర్పడిన తర్వాత మాత్రమే ప్రభావితం అవుతాయి - స్క్రీన్ పరిమాణం పైన లేదా కొన్ని పరిమితుల కంటే తక్కువగా ఉన్నప్పుడు.
యాక్షన్ లో మీడియా ప్రశ్నలు
కాబట్టి మీరు మీడియా ప్రశ్నలను వెబ్ సైట్ లో ఎలా ఉపయోగించాలి? ఇక్కడ చాలా సులభమైన ఉదాహరణ:
- మీరు ఏ దృశ్య శైలుల (CSS అంటే ఏమిటి) యొక్క బాగా నిర్మాణాత్మక HTML పత్రంతో ప్రారంభమవుతుంది
- మీ CSS ఫైల్ లో, మీరు సాధారణంగా పేజీని స్టైలింగ్ చేసి, వెబ్ సైట్ ఎలా చూస్తారో దాని కోసం ఆధారాన్ని ఏర్పాటు చేస్తారు. మీరు పేజీ యొక్క ఫాంట్ పరిమాణం 16 పిక్సెల్స్ కావాలనుకుంటున్నారని చెప్పండి, మీరు ఈ CSS ను రాయవచ్చు: శరీరం {font-size: 16px; }
- ఇప్పుడు, పెద్ద తెరల కోసం ఆ ఫాంట్ పరిమాణాన్ని పెంచుకోవచ్చు. ఇక్కడ మీడియా ప్రశ్నలు కిక్ కిక్ అవుతాయి. మీరు ఈ విధంగా ఒక మీడియా ప్రశ్నని ప్రారంభిస్తారు: @ మీడియా స్క్రీన్ మరియు (min-width: 1000px) {}
- ఇది మీడియా ప్రశ్న వాక్యనిర్మాణం. ఇది మీడియా ప్రశ్నని స్థాపించడానికి @ మీడియాతో మొదలవుతుంది. మీరు "మీడియా రకం" ను సెట్ చేసిన తర్వాత, ఈ సందర్భంలో "స్క్రీన్" అవుతుంది. ఇది డెస్క్టాప్ కంప్యూటర్ తెరలు, టాబ్లెట్లు, ఫోన్లు మొదలైన వాటికి వర్తిస్తుంది. చివరగా, మీరు మీడియా ప్రశ్న "మీడియా ఫీచర్" తో ముగిస్తారు. పైన మా ఉదాహరణలో, అది "మధ్య వెడల్పు: 1000px". దీని అర్థం మీడియా ప్రశ్న కనీసం వెడల్పు 1000 పిక్సల్స్ వెడల్పుతో డిస్ప్లేలు కోసం కిక్ చేస్తుంది.
- మీడియా ప్రశ్న యొక్క ఈ అంశాల తర్వాత, మీరు ఏదైనా సాధారణ CSS నియమావళిలో మీరు ఏమి చేస్తారో అదే విధంగా ఒక ప్రారంభ మరియు ముగింపు కర్లీ బ్రేస్ను జోడించండి.
- ఒక మీడియా ప్రశ్నకు చివరి దశ ఈ నియమం నెరవేరిన తర్వాత మీరు దరఖాస్తు చేయదలిచిన CSS నియమాలను జోడించడం. మీరు మీడియా ప్రశ్నని రూపొందించే గిరజాల జంట కలుపుల మధ్య ఈ CSS నియమాలను చేర్చండి: @ మీడియా స్క్రీన్ మరియు (మిని వెడల్పు: 1000px) {body {font-size: 20px; }
- మీడియా ప్రశ్న యొక్క పరిస్థితులు నెరవేరినప్పుడు (బ్రౌజర్ విండో కనీసం 1000 పిక్సెల్స్ వెడల్పు ఉంటుంది), ఈ CSS స్టైల్ ప్రభావం పడుతుంది, మా సైట్ యొక్క ఫాంట్ పరిమాణాన్ని 16 పిక్సెల్ల నుండి మార్చాము, మొదట మేము 20 పిక్సెల్ల యొక్క మా కొత్త విలువకు స్థాపించబడింది.
మరిన్ని స్టైల్స్ కలుపుతోంది
మీ వెబ్సైట్ యొక్క దృశ్య రూపాన్ని సరిచేయడానికి అవసరమైన విధంగా ఈ మీడియా ప్రశ్నలో మీరు అనేక CSS నియమాలను ఉంచవచ్చు. ఉదాహరణకు, మీరు ఫాంట్ పరిమాణాన్ని 20 పిక్సెల్లకు మాత్రమే పెంచుకోవాలనుకున్నా, అన్ని పేరాలను బ్లాక్ (# 000000) కు మార్చండి, మీరు దీన్ని జోడించగలరు:
@ మీడియా స్క్రీన్ మరియు (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}మరిన్ని మీడియా ప్రశ్నలను కలుపుతోంది
అదనంగా, మీరు ప్రతి పెద్ద పరిమాణానికి మరిన్ని మీడియా ప్రశ్నలను జోడించవచ్చు, వీటిని మీ శైలి షీట్కు జోడించడం చేయవచ్చు:
@ మీడియా స్క్రీన్ మరియు (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @ మీడియా స్క్రీన్ మరియు (min-width: 1400px) {body {font-size: 24px; }}మొదటి మీడియా ప్రశ్నలు 1000 పిక్సెల్స్ వెడల్పులో కిక్ చేయబడతాయి, ఫాంట్ పరిమాణాన్ని 20 పిక్సెల్లుగా మారుస్తుంది. అప్పుడు, బ్రౌజర్ 1400 పిక్సెల్స్ పైన ఉన్నట్లయితే, ఫాంట్ పరిమాణం మళ్లీ 24 పిక్సెల్స్గా మారుతుంది. మీరు మీ నిర్దిష్ట వెబ్సైట్ కోసం అవసరమైన అనేక మీడియా ప్రశ్నలను జోడించవచ్చు.
కనిష్ట వెడల్పు మరియు గరిష్ట వెడల్పు
"క్విన్-వెడల్పు" లేదా "గరిష్ట-వెడల్పు" తో మీడియా ప్రశ్నలను రాయడానికి సాధారణంగా రెండు మార్గాలు ఉన్నాయి. ఇప్పటివరకు, మేము చర్య లో "min-width" చూసిన. బ్రౌజర్ కనీసం కనిష్ట వెడల్పుని చేరిన తర్వాత ఇది మీడియా ప్రశ్నలను ప్రభావితం చేస్తుంది. బ్రౌజర్ కనీసం 1,000 పిక్సెల్స్ వెడల్పు అయినప్పుడు "min-width: 1000px" ను ఉపయోగించే ఒక ప్రశ్న వర్తిస్తుంది. మీరు "మొబైల్ మొదటి" పద్ధతిలో ఒక సైట్ను నిర్మిస్తున్నప్పుడు మీడియా ప్రశ్న ఈ శైలిని ఉపయోగిస్తారు.
మీరు "గరిష్ట-వెడల్పు" ను ఉపయోగిస్తే, ఇది వ్యతిరేక పద్ధతిలో పనిచేస్తుంది. బ్రౌజర్ పరిమాణం ఈ పరిమాణంలో పడిపోయినప్పుడు "max-width: 1000px" యొక్క మీడియా ప్రశ్న వర్తిస్తుంది.
పాత బ్రౌజర్ల గురించి
మీడియా ప్రశ్నలతో ఒక సవాలు ఇంటర్నెట్ ఎక్స్ప్లోరర్లో పాత సంస్కరణల్లో వారి మద్దతు లేకపోవడం. కృతజ్ఞతగా, ఆ పాత బ్రౌజర్లలో మీడియా ప్రశ్నలకు మద్దతునివ్వగల బహుభూయపిల్లలు అందుబాటులో ఉన్నాయి , ఈ సైట్ యొక్క ప్రదర్శన పాత బ్రౌజర్ సాఫ్ట్వేర్లో విచ్ఛిన్నం కాదని మీరు భరోసా చేసేటప్పుడు నేడు మీరు వెబ్సైట్లలో వాటిని ఉపయోగించడానికి అనుమతిస్తుంది.
1/24/17 న జెరెమీ గిరార్డ్ చే సవరించబడింది