సృష్టించ‌డం ఎలా: సాధార‌ణ ప‌రిక‌రాల బ్రేక్‌పాయిన్స్

సాధార‌ణ ప‌రిక‌రాల బ్రేక్‌పాయిన్స్ కొరకు మీడియా క్వ‌య‌రీలను ఉప‌యోగించండి తెలుసుకోండి.

సాధార‌ణ ప‌రిక‌రాల బ్రేక్‌పాయిన్స్

వివిధ పొడ‌వులు మ‌రియు వెడల్పులు క‌లిగిన అనేక ప‌రిక‌రాలు మ‌రియు స్క్రీన్లు ఉన్నందున, ప్ర‌తి ప‌రిక‌రానికి ఖ‌రీదైన బ్రేక్‌పాయిన్స్ సృష్టించ‌డం క‌ష్టం

కార్య‌క‌లాపాల‌ను స‌ర‌ళంగా చేయ‌డానికి, మీరు ఐదు సాధార‌ణ గుంపుల‌ను స్థానంచేయ‌వ‌చ్చు:

ఉదాహ‌ర‌ణ‌

/* చిన్ని ప‌రిక‌రాలు (మొబైల్ ఫోన్స్, 600px కిందివి) */
@media only screen and (max-width: 600px) {...}
/* చిన్న ప‌రిక‌రాలు (గోలింగ్ ప్లాట్ఫార‌మ్‌స్ మ‌రియు పెద్ద మొబైల్ ఫోన్స్, 600px మించిన‌వి) */
@media only screen and (min-width: 600px) {...}
/* మ‌ధ్య‌త‌ర‌హం ప‌రిక‌రాలు (గోలింగ్ ప్లాట్ఫార‌మ్‌స్, 768px మించిన‌వి) */
@media only screen and (min-width: 768px) {...}
/* పెద్ద ప‌రిక‌రాలు (లాప్టాప్లు/డెస్క్టాప్లు, 992px మించిన‌వి) */
@media only screen and (min-width: 992px) {...}
/* సూక్ష్మ ప‌రిక‌రాలు (పెద్ద లాప్టాప్లు మ‌రియు డెస్క్టాప్లు, 1200px మించిన‌వి) */
@media only screen and (min-width: 1200px) {...}

మీరే ప్ర‌యోగించండి

సంబంధిత పేజీలు

శిక్ష‌ణాగ్రంధం:CSS 媒体查询

శిక్ష‌ణాగ్రంధం:CSS మీడియా క్వ‌య‌రీ ఉదాహ‌ర‌ణ‌లు

పరిచ‌యం కురించి పుస్తకం:CSS @media 规则

శిక్ష‌ణాగ్రంధం:రెస్పాన్సివ్ వెబ్ డిజైన్ నిర్వ‌హించ‌డానికి మీడియా క్వ‌య‌రీలు ఉప‌యోగించ‌ండి

పరిచ‌యం కురించి పుస్తకం:జావాస్క్రిప్ట్ window.matchMedia() మెథడ్