రెస్పాన్సివ్ వెబ్ డిజైన్ - మీడియా క్వరీ

మీడియా క్వరీ ఏమిటి?

మీడియా క్వరీ అనేది CSS3 లో ప్రవేశపెట్టబడిన ఒక CSS టెక్నాలజీ.

ప్రత్యేక పరిస్థితులు నిర్ణయించబడినప్పుడు మాత్రమే ఉపయోగిస్తారు @media రూల్స్ నిరూపణకు ఉపయోగించబడుతుంది.

ఉదాహరణ

బ్రౌజర్ విండో 600px లేదా తక్కువ ఉన్నప్పుడు, బ్యాక్‌గ్రౌండ్ రంగు తెలుపు నీలం ఉండాలి:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

亲自试一试

బ్రేక్‌పాయింట్ చేర్చండి

ఈ ట్యూటోరియల్‌లో ముందు మేము నాలుగు నాలుగు నాలుగు ప్రక్రియలు కలిగిన పేజీ చేసాము, కానీ ఈ రెస్పాన్సివ్ పేజీ చిన్న స్క్రీన్‌లో మంచి రూపంలో చూడబడలేదు.

మీడియా క్వరీ మీకు సహాయపడుతుంది. మేము ఒక బ్రేక్‌పాయింట్ చేర్చవచ్చు, అక్కడ డిజైన్ కొన్ని భాగాలు బ్రేక్‌పాయింట్ ప్రక్కన వేర్వేరుగా ప్రదర్శించబడతాయి.


డెస్క్టాప్ కంప్యూటర్

మొబైల్ ఫోన్

768px వెడల్పులో మీడియా క్వరీ ఉపయోగించి బ్రేక్‌పాయింట్ చేర్చండి:

ఉదాహరణ

స్క్రీన్ (బ్రౌజర్ విండో) 768px కంటే తక్కువ ఉన్నప్పుడు, ప్రతి నిలువును 100% వెడల్పు ఉండాలి:

/* డెస్క్టాప్ పరికరాలకు: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* మొబైల్ కొరకు: */
  [class*="col-"] {
    width: 100%;
  }
}

亲自试一试

ఎల్లప్పుడూ మొబైల్ ప్రాధాన్యత కలిగిన డిజైన్

మొబైల్ ప్రాధాన్యత కలిగిన (Mobile First) అంటే, టేబులేట్ లేదా ఏదైనా ఇతర పరికరానికి డిజైన్ చేయడానికి ముందు, మొబైల్ పరికరానికి డిజైన్ చేయడానికి ప్రాధాన్యత ఇస్తాము (ఇది చిన్న పరికరాలపై పేజీ వేగంగా చూడబడుతుంది).

ఇది అర్థం చేస్తుంది మాకు CSS లో కొన్ని మెరుగులను చేయాలి.

బ్రేక్‌పాయింట్ కంటే తక్కువ 768px వెడల్పు ఉన్నప్పుడు, మేము డిజైన్‌ను మార్చడానికి బదులుగా వెడల్పును మార్చాము. మేము ఇలా 'మొబైల్ ప్రాధాన్యత కలిగిన' డిజైన్‌ను చేసుకున్నాము:

ఉదాహరణ

/* మొబైల్ కొరకు: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* డెస్క్టాప్ కొరకు: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

亲自试一试

మరొక బ్రేక్‌పాయింట్

మీరు ఏమైనా సంఖ్యలో బ్రేక్‌పాయింట్లను జోడించవచ్చు.

మేము టాబ్లెట్ మరియు మొబైల్ ఫోన్ మధ్య ఒక బ్రేక్‌పాయింట్ చేర్చుకుంటాము.


డెస్క్టాప్ కంప్యూటర్

టాబ్లెట్

మొబైల్ ఫోన్

ఈ కారణంగా, మేము ఒక మీడియా క్వరీ (600 పిక్సెల్స్ లో ఉంది) జోడించాము మరియు 600 పిక్సెల్స్ కంటే ఎక్కువ కాని 768 పిక్సెల్స్ కంటే తక్కువ పరికరాలకు ఒక కొత్త క్లాస్ సమూహం జోడించాము:

ఉదాహరణ

మీరు గమనించాలి, రెండు క్లాస్లు ప్రామాణికంగా ప్రత్యంతం అనిపిస్తున్నాయి, అయితే పేరులో మాత్రమే వ్యత్యాసం ఉంది (col- మరియు col-s-):

/* మొబైల్ కొరకు: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* ప్లాట్ఫారమ్ కొరకు: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* డెస్క్టాప్ కొరకు: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

రెండు అదే విధమైన క్లాస్లు ఉండడం వింతగా అనిపిస్తుంది, కానీ ఇది మాకు ప్రతి విభజన ప్రాంతంలో నిలువలు ఏమి జరుగుతుందో నిర్ణయించడానికి HTML ఉపయోగించడానికి అవకాశం కల్పిస్తుంది:

HTML ప్రామాణికం

డెస్క్టాప్ కొరకు:

మొదటి మరియు మూడవ భాగాలు 3 నిలువలు గుర్తిస్తాయి. మధ్య భాగం 6 నిలువలు గుర్తిస్తుంది.

ప్లాట్ఫారమ్ కొరకు:

మొదటి భాగం 3 నిలువలు గుర్తిస్తుంది, రెండవ భాగం 9 నిలువలు గుర్తిస్తుంది, మూడవ భాగం మొదటి రెండు భాగాల క్రింద చూపబడుతుంది మరియు 12 నిలువలు గుర్తిస్తుంది:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

亲自试一试

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

వెదల్పు మరియు వెడల్పు వివిధమైన ప్రదర్శన పరిమాణాలు మరియు పరికరాలు ఎంతో ఉన్నాయి, కాబట్టి ప్రతి పరికరానికి ఖచ్చితమైన బ్రేక్పాయిన్స్ సృష్టించడం చాలా కష్టం. సరళతరంగా, ఈ ఐదు సమూహాలపై దృష్టి పెట్టవచ్చు:

ఉదాహరణ

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

亲自试一试

దిశ: ప్రతిమ లేదా లాండ్స్కేప్

మీడియా క్వరీ పరిశీలన ద్వారా బ్రౌజర్ దిశను ఆధారంగా పేజీ యొక్క అనుసంధానాన్ని మార్చవచ్చు.

మీరు బ్రౌజర్ విండో వెడల్పు కంటే పొడవు అంతకంటే ఎక్కువ ఉన్నప్పుడు మాత్రమే అనువర్తించే ఒక జంట సిఎస్ఎస్ అటీరిబ్యూట్స్ అనేకముంది సెట్ చేయవచ్చు, ఇది అనగా 'లాండ్స్కేప్' దిశ:

ఉదాహరణ

నిర్దేశిత దిశ అయినప్పుడు లేదా లాండ్స్కేప్ మోడ్ ఉన్నప్పుడు, వెబ్ పేజీ యొక్క బ్యాక్గ్రౌండ్ కలర్ హైలైట్ బ్లూ గా ఉంటుంది:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

亲自试一试

మీడియా క్వరీ ద్వారా అంశాన్ని మరగుపెట్టండి

మీడియా క్వరీ యొక్క మరొక సాధారణ ఉపయోగం వివిధ ప్రదర్శన పరిమాణాలపై అంశాలను మరగుపెట్టడం ఉంది:

ఉదాహరణ

/* ప్రదర్శన పరిమాణం 600 పిక్సెల్స్ లేదా తక్కువ అయితే, అంశాన్ని మరగుపెట్టండి */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

亲自试一试

మీడియా క్వరీ ద్వారా ఫాంట్ సైజ్ సవరించండి

మీరు వివిధ ప్రదర్శన పరిమాణాలపై కూడా అంశాల ఫాంట్ సైజ్ ను మార్చవచ్చు మీడియా క్వరీ ఉపయోగించడం ద్వారా:

ఉదాహరణ

/* ప్రదర్శన పరిమాణం 601px లేదా అంతకంటే ఎక్కువ అయితే, <div> యొక్క font-size ను 80px గా సెట్ చేయండి */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕尺寸为 600px 或更小，请将 
 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

亲自试一试

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请在 CSS 参考手册中参阅 @media 规则。