CSS మీడియా క్వరీ - ఉదాహరణ
- ముందస్తు పేజీ CSS మీడియా క్వరీ
- తదుపరి పేజీ RWD పరిచయం
CSS మీడియా క్వరీ - మరిన్ని ఉదాహరణలు
మీరు మీడియా క్వరీ ఉపయోగించిన మరిన్ని ఉదాహరణలను చూడండి.
మీరు వివిధ పరికరాలకు అనుకూలమైన స్టైల్స్ పాత్రికీలను పంపడానికి ఉపయోగించే ఒక ప్రసిద్ధ టెక్నిక్ మీడియా క్వరీ అని పిలుస్తారు.
ఒక సాధారణ ఉదాహరణను మాట్లాడుకుంటున్నాము, వివిధ పరికరాలకు బ్యాక్గ్రౌండ్ కలర్ ను మార్చండి చేయండి చేస్తాము:
ఉదాహరణ
/* బాడీ యొక్క బ్యాక్గ్రౌండ్ కలర్ ను టాన్ కలర్ గా సెట్ చేయండి */
body {
background-color: tan;
}
/* పరికరం 992 పిక్సెల్లు లేదా తక్కువ విస్తీర్ణంలో, బ్యాక్గ్రౌండ్ కలర్ ను బ్లూ కలర్ గా సెట్ చేయండి */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* పరికరం 600 పిక్సెల్లు లేదా తక్కువ విస్తీర్ణంలో, బ్యాక్గ్రౌండ్ కలర్ ను ఓలివ్ కలర్ గా సెట్ చేయండి */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
మీరు ఎందుకు ఖచ్చితంగా 992px మరియు 600px వినియోగిస్తున్నాం అని తెలుసుకోవాలనుకుంటున్నారా? వాటిని మేము 'ప్రముఖ బ్రేక్‌పాయిన్లు' అంటాం. మీరు మా క్రోస్ లింక్లను సందర్శించవచ్చు. రెస్పాన్సివ్ వెబ్ డిజైన్ ట్యూటోరియల్ మీరు ప్రముఖ బ్రేక్‌పాయిన్లకు గురించి ఎక్కువ కలిపి తెలుసుకోవాలనుకుంటున్నారా? వాటిని మేము పరికరాల యొక్క 'ప్రముఖ బ్రేక్‌పాయిన్లు' అంటాం. మీరు మా క్రోస్ లింక్లను సందర్శించవచ్చు.
菜单的媒体查询
在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。
ఉదాహరణ
/* నావిబార్ కంటైనర్ */
.topnav {
overflow: hidden;
background-color: #333;
}
/* నావిబార్ లింకులు */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 600 పిక్సెల్స్ లేదా తక్కువ వెడల్పు ఉన్న స్క్రీన్లో మెనూ లింకులు పక్కపక్కకు ఉంచకుండా పైకి పెట్టబడతాయి */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
నిలువుల మీడియా క్వరీ
మీడియా క్వరీ యొక్క సాధారణ ఉపయోగం రెస్పాన్సివ్ లేఆట్ సృష్టించడం ఉంది. ఈ ఉదాహరణలో, మేము నాలుగు, రెండు మరియు పూర్తి వెడల్పు ఉన్న నిలువుల మధ్య మారుస్తున్న ఒక లేఆట్ సృష్టించాము, ఇది వివిధ స్క్రీన్ పరిమాణాలకు అనుగుణంగా ఉంటుంది:
పెద్ద స్క్రీన్:
మధ్యమ స్క్రీన్:
చిన్న స్క్రీన్:
ఉదాహరణ
/* నాలుగు సమానమైన నిలువులు పక్కపక్కకు అనుగుణంగా ఫ్లోటింగ్ సృష్టించండి */
.column {
float: left;
width: 25%;
}
/* 992px లేదా తక్కువ వెడల్పు ఉన్న స్క్రీన్లో నాలుగు నిలువులు రెండుకు మారుస్తాయి */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 600 పిక్సెల్స్ వరకు వెడల్పు ఉన్న స్క్రీన్లో అన్ని నిలువులు పైకి పెట్టి, పక్కపక్కకు ఉంచకుండా */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
提示：మరింత ఆధునికమైన నిలువుల స్థానాల సృష్టించడానికి సిఎస్ఎస్ ఫ్లెక్స్ బాక్స్ ఉపయోగించండి (క్రింది ఉదాహరణలను చూడండి). అయితే, ఇంటర్నెట్ ఎక్స్ప్లోరర్ 10 మరియు అది ముంది సంస్కరణలు దానిని మద్దతు చేయవు. ఇఇ6-10 కు మద్దతు అవసరమైతే, ఫ్లోటింగ్ ఉపయోగించండి (పైన చూడండి).
ఫ్లెక్స్ బాక్స్ లేఆట్ మాడ్యూల్ గురించి మరింత తెలుసుకోవడానికి అభ్యసించండి CSS ఫ్లెక్స్‌బాక్స్ ఈ చాప్టర్ ను అభ్యసించండి.
రెస్పాన్సివ్ వెబ్ డిజైన్ గురించి మరింత తెలుసుకోవడానికి మా యొక్క రెస్పాన్సివ్ వెబ్ డిజైన్ ట్యూటోరియల్.
ఉదాహరణ
/* ఫ్లెక్స్ బాక్స్ కంటైనర్ */
.row {
display: flex;
flex-wrap: wrap;
}
/* నాలుగు సమానమైన నిలువులు సృష్టించండి */
.column {
flex: 25%;
padding: 20px;
}
/* 992px లేదా తక్కువ వెడల్పు ఉన్న స్క్రీన్లో నాలుగు నిలువులు రెండుకు మారుస్తాయి */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* 600 పిక్సెల్స్ వరకు వెడల్పు ఉన్న స్క్రీన్లో అన్ని నిలువులు పైకి పెట్టి, పక్కపక్కకు ఉంచకుండా */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
మీడియా క్వరీతో మెనూస్ అద్దంబడించడం
మీడియా క్వరీ యొక్క మరొక సాధారణ ఉపయోగం వివిధ స్క్రీన్ పరిమాణాలపై మెనూస్ అద్దంబడించడం ఉంది:
在小屏幕上我会隐藏。
ఉదాహరణ
/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
用媒体查询改变字体
మీరు మీడియా క్వరీస్ ద్వారా వివిధ స్క్రీన్ సైజుల్లో ఎలమెంట్స్ యొక్క ఫాంట్ సైజును మార్చవచ్చు:
ఫాంట్ సైజ్ మార్పులు
ఉదాహరణ
/* బ్రౌజర్ వెడిథు 600పిక్సెల్స్ కంటే ఎక్కువ ఉన్నప్పుడు, <div> యొక్క ఫాంట్ సైజును 80పిక్సెల్స్ గా మార్చు */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* బ్రౌజర్ వెడిథు 600పిక్సెల్స్ లేదా తక్కువగా ఉన్నప్పుడు, <div> యొక్క ఫాంట్ సైజును 30పిక్సెల్స్ గా మార్చు */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
ఫ్లెక్సిబుల్ చిత్రాల సేకరణ
ఈ ఉదాహరణలో, మేము ఫ్లెక్స్‌బాక్స్‌ను మీడియా క్వరీస్‌తో కలిపి ప్రతిస్పందించిన చిత్రాల సేకరణను సృష్టించాము:
ఉదాహరణ
ఫ్లెక్సిబుల్ వెబ్‌సైట్
ఈ ఉదాహరణలో, మేము ఫ్లెక్స్‌బాక్స్‌ను మీడియా క్వరీస్‌తో కలిపి ఉపయోగించి ప్రతిస్పందించిన వెబ్‌సైట్ను సృష్టించాము, దీనిలో ఫ్లెక్సిబుల్ నేవిగేషన్ మరియు ఫ్లెక్సిబుల్ కంటెంట్ ఉన్నాయి.
ఉదాహరణ
దిశ: ప్రతిమ లేదా దిశాంతం
మీడియా క్వరీస్ బ్రౌజర్ దిశను ఆధారంగా పేజీ రూపకల్పనను మార్చడానికి కూడా ఉపయోగించవచ్చు.
మీరు ఒక బ్రౌజర్ వెడిథు బ్రౌజర్ హెచ్చర్చు కంటే ఎక్కువ ఉన్నప్పుడు మాత్రమే వర్తించే ఒక సమయంలో ఉన్న కొన్ని CSS అట్రిబ్యూట్లను అమర్చవచ్చు, అది అని విన్నచూపు ప్రక్రియను అని పిలుస్తారు:
ఉదాహరణ
అడిగ్రాఫ్ మోడ్లో ఉన్నప్పుడు పసుపునిముగింపు బ్యాక్గ్రౌండ్ కలిగించండి:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
కనిష్ట వెడిథు నుండి గరిష్ట వెడిథు
మీరు max-width మరియు min-width అట్రిబ్యూట్లను ఉపయోగించి కనిష్ట మరియు గరిష్ట వెడిథును నిర్ణయించవచ్చు.
ఉదాహరణకు, బ్రౌజర్ వెడిథు 600 పిక్సెల్స్ నుండి 900 పిక్సెల్స్ వరకు ఉన్నప్పుడు <div> ఎలమెంట్ యొక్క ప్రక్రియను మార్చు:
ఉదాహరణ
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
అడిషనల్ వాల్యూస్ ఉపయోగించడం: ఈ ఉదాహరణలో, మేము కామా స్కేయర్ (కాకుండా OR ఆపరేటర్ లాగా) ద్వారా అడిషనల్ మీడియా క్వరీస్ ను ఇప్పటికే ఉన్న మీడియా క్వరీస్ కు జోడిస్తాము:
ఉదాహరణ
/* బ్రౌజర్ వెడిథు 600 పిక్సెల్స్ నుండి 900 పిక్సెల్స్ వరకు లేదా 1100 పిక్సెల్స్ కంటే ఎక్కువ ఉన్నప్పుడు - <div> యొక్క ప్రక్రియను మార్చు */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS @media 参考手册
有关所有媒体类型和特性/表达式的完整概述，请查看 CSS 参考中的 @media 规则.
提示：如需学习有关响应式 Web 设计（如何针对不同的设备和屏幕）的更多知识，以及使用媒体查询断点，请阅读我们的 రెస్పాన్సివ్ వెబ్ డిజైన్ ట్యూటోరియల్.
- ముందస్తు పేజీ CSS మీడియా క్వరీ
- తదుపరి పేజీ RWD పరిచయం
