CSS @media రూల్స్

నిర్వచనం మరియు ఉపయోగం

@media రూల్స్ మీడియా క్వరీస్ లో వివిధ మీడియా టైప్స్ / పరికరాలకు వివిధ షైల్స్ ఆప్లై చేయడానికి ఉపయోగించబడతాయి。

మీడియా క్వరీస్ అనేది అనేక విషయాలను తనిఖీ చేయవచ్చు, వాటిలో ఉన్నాయి:

  • వీక్షణ వెడల్పు మరియు పొడవు
  • పరికరం వెడల్పు మరియు పొడవు
  • దిక్కు (ఫోన్ లేదా టాబ్లెట్ సిగ్నల్ స్టేచ్ లేదా పోర్ట్రేట్ మోడ్ లో ఉందా?)
  • రెసల్యూషన్

మీడియా క్వరీస్ ఉపయోగించడం ఒక ప్రజాదరణ సాంకేతికత ఉంది, ఇది డెస్క్టాప్, లాప్టాప్, టాబ్లెట్ మరియు మొబైల్ ఫోన్లకు పరిమితమైన షైల్స్ అందించడానికి ఉపయోగపడుతుంది (రెస్పాన్సివ్ వెబ్ డిజైన్).

మీరు మీడియా క్వరీస్ ఉపయోగించవచ్చు కొన్ని షైల్స్ మాత్రమే ప్రింట్ డాక్యుమెంట్స్ లేదా స్క్రీన్ రీడర్స్ కోసం వర్తించేటట్టు నిర్ణయించవచ్చు (mediatype: print, screen లేదా speech).

除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

మరింత చూడండి:

CSS పాఠ్యక్రమం:CSS మీడియా క్వరీ

CSS పాఠ్యక్రమం:CSS మీడియా క్వరీస్ ఉదాహరణలు

RWD పాఠ్యక్రమం:మీడియా క్వరీస్ ద్వారా ప్రతిస్పందకత కలిగిన వెబ్ డిజైన్ అమలు చేయడం

JavaScript పరికరం పాఠకం:window.matchMedia() మాథ్యాడ్

ఉదాహరణ

ఉదాహరణ 1

బ్రౌజర్ విండో వెడల్పు 600px లేదా తక్కువగా ఉన్నప్పుడు, <body> అంశం యొక్క బ్యాక్‌గ్రౌండ్ కలర్‌ను 'తెలుపు నీలం'గా మార్చండి:

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

స్వయంగా ప్రయత్నించండి

మరింత TIY ఉదాహరణలను పేజీ కింద కనుగొనవచ్చు.

CSS సంకేతాలు

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not, only మరియు and కీలకబట్టి అర్థాలు:

not: not కీలకబట్టి మీడియా క్వరీస్ యొక్క పూర్తి అర్థాన్ని మారుస్తుంది.

only: only కీలకబట్టి పాత బ్రౌజర్లు మీడియా క్వరీస్లో ఉపయోగించిన మీడియా అంశాలను అనుమతించదు, ఈ బ్రౌజర్లు మీడియా అంశాలను మద్దతు చేయవు. ఇది ఆధునిక బ్రౌజర్లపై ప్రభావం లేదు.

and: and కీలకబట్టి మీడియా అంశాలను మీడియా రకానికి లేదా ఇతర మీడియా అంశాలకు జోడిస్తుంది.

వాటివలన ఎంపికాత్మకం కానీ, not లేదా only ఉపయోగించినప్పుడు మీడియా రకాన్ని కూడా తెలుపవలసి ఉంటుంది.

మీరు వివిధ మీడియాలకు వివిధ స్టైల్‌షీట్లను ఉపయోగించవచ్చు, ఇలా ఉంటుంది:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

మీడియా రకం

విలువ వర్ణన
all డిఫాల్ట్. అన్ని మీడియా రకాల యూనిట్లకు ఉపయోగపడుతుంది.
print ప్రింటర్కు ఉపయోగపడుతుంది.
screen కంప్యూటర్ స్క్రీన్, టాబులెట్, స్మార్ట్‌ఫోన్ మొదలైన వివిధ మీడియా యూనిట్లకు ఉపయోగపడుతుంది.
speech పేజీని పఠించే స్క్రీన్ రీడర్‌లకు ఉపయోగపడుతుంది.

మీడియా అంశాలు

విలువ వర్ణన
any-hover

ఏ ఉపయోగించదగిన ఇన్‌పుట్ మెకానిజమ్ వినియోగదారుని (మౌస్ వంటి) లోని అంశంపై పడగలిగే విధం ఉంది లేదు?

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
any-pointer

ఉపయోగించదగిన ఇన్‌పుట్ మెకానిజమ్స్‌లో ఏ పాయింటర్ పరికరం ఉంది మరియు అది ఎంత ప్రెసిషన్ కలిగివుంది?

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
aspect-ratio 视口（viewport）的宽高比。
color

输出设备每个像素的比特值，常见的有 8、16、32 位。

如果设备不支持输出彩色，则该值为 0。
color-gamut

用户代理和输出设备大致程度上支持的色域。

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
color-index

输出设备的颜色查询表（color lookup table）中的条目数量。

如果设备不使用颜色查询表，则该值为 0。
device-aspect-ratio

输出设备的宽高比。

已在 Media Queries Level 4 中被弃用。
device-height

输出设备渲染表面（如屏幕）的高度。

已在 Media Queries Level 4 中被弃用。
device-width

输出设备渲染表面（如屏幕）的宽度。

已在 Media Queries Level 4 中被弃用。
display-mode

应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定

在 Web App Manifest spec 被定义。
forced-colors

检测是用户代理否限制调色板。

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
grid 输出设备使用网格屏幕还是点阵屏幕？
height 视口（viewport）的高度。
hover

主输入机制是否允许用户将鼠标悬停在元素上？

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
inverted-colors

浏览器或者底层操作系统是否反转了颜色。

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
light-level

当前环境光水平。

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
max-aspect-ratio 显示区域的宽度和高度之间的最大比例。
max-color 输出设备每个颜色分量的最大位数。
max-color-index 设备可以显示的最大颜色数。
max-height 显示区域的最大高度，例如浏览器窗口。
max-monochrome 单色（灰度）设备上每种“颜色”的最大位数。
max-resolution 设备的最大分辨率，使用 dpi 或 dpcm。
max-width 显示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio 显示区域的宽度和高度之间的最小比例。
min-color 输出设备每个颜色分量的最小位数。
min-color-index 设备可以显示的最小颜色数。
min-height 显示区域的最小高度，例如浏览器窗口。
min-monochrome పశ్చిమార్గం పెద్ద సింహం అనేది ప్రస్తుతం అందుబాటులో లేదు.
min-resolution 设备的最低分辨率，使用 dpi 或 dpcm。
min-width 显示区域的最小宽度，例如浏览器窗口。
monochrome

输出设备单色帧缓冲区中每个像素的位深度。

如果设备并非黑白屏幕，则该值为 0。
orientation 视窗（viewport）的旋转方向（横屏还是竖屏模式）。
overflow-block

输出设备如何处理沿块轴溢出视口(viewport)的内容。

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
overflow-inline

沿内联轴溢出视口(viewport)的内容是否可以滚动？

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
pointer

主要输入机制是一个指针设备吗？如果是，它的精度如何？

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
prefers-color-scheme

探测用户倾向于选择亮色还是暗色的配色方案。

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
prefers-contrast

వినియోగ‌దారుడు సిస్ట‌మ్‌లో స‌మాన రంగుల మ‌ధ్య కాంట్రాస్ట్‌ను పెంచాలని లేదా త‌గ్గాలని అభ్య‌ర్ధిస్తుంది అని ప‌రిశీలించండి.

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
prefers-reduced-motion

వినియోగ‌దారుడు పేజిలో త‌క్కువ డైనమిక్ ప్ర‌భావాలను ఎంచుకుంటుంది అని నిర్ధారించండి.

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
prefers-reduced-transparency

వినియోగ‌దారుడు త‌క్కువ పార‌ద‌ర్శ‌క‌త‌ను ఎంచుకుంటుంది అని నిర్ధారించండి.

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
resolution అవుట్‌పుట్ డివైస్ రెజల్యూషన్, dpi లేదా dpcm ఉప‌యోగించి.
scan అవుట్‌పుట్ డివైస్ స్కాన్ ప్రక్రియ (టెలివిజన్ వంటి విద్యుత్ ఉపకరణాలు కోసం).
scripting

స్క్రిప్టింగ్ (ఉదాహరణకు JavaScript) అందుబాటులో ఉందా లేదు అని ప‌రిశీలించండి.

మీడియా క్వరీలు లెవల్ 5 లో జోడించబడింది.
update

అవుట్‌పుట్ డివైస్ అప్డేట్ కంటెంట్ రెండరింగ్ ఫ్రీక్వెన్సీ.

మీడియా క్వరీలు లెవల్ 4 లో జోడించబడింది.
width విండోయ్ వెడల్పు (విండోపోర్ట్ వెడల్పు).

మరిన్ని ఉదాహరణలు

ఉదాహరణ 2

బ్రౌజర్ వెడల్పు 600పిక్సెల్స్ లేదా త‌క్కువ ఉంటే ఎల‌మెంట్స్ మార్చండి:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

పరదేల వెడల్పు 800 పిక్సెల్స్ లేదా అంతకంటే ఎక్కువ ఉంటే బ్యాక్‌గ్రౌండ్‌కు మెడియా క్వరీ ఉప‌యోగించి తెలుపు పసుపు రంగును సెట్ చేయండి; పరదేల వెడల్పు 400 నుండి 799 పిక్సెల్స్ మ‌ధ్య ఉంటే బ్యాక్‌గ్రౌండ్‌కు మెడియా క్వరీ ఉప‌యోగించి తెలుపు హ‌రిత రంగును సెట్ చేయండి. ప‌రదేల వెడల్పు 400 పిక్సెల్స్ కంటే త‌క్కువ ఉంటే బ్యాక్‌గ్రౌండ్‌కు తెలుపు నీలి రంగును ఉప‌యోగించండి:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

创建一个响应式导航菜单（在大屏幕上水平显示，在小屏幕上垂直显示）：

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

స్వయంగా ప్రయత్నించండి

例子 5

使用媒体查询来创建响应式列布局：

/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

స్వయంగా ప్రయత్నించండి

例子 6

使用媒体查询来创建响应式网站：

స్వయంగా ప్రయత్నించండి

例子 7

媒体查询还可以用于根据浏览器的方向更改页面的布局。您可以写一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度（即“横屏”方向）时才适用。

如果方向处于横屏模式，则使用浅蓝色背景色：

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 8

మీడియా క్వరీలను ఉపయోగించి ప్రింట్ లో నిలుస్తున్న డాక్యుమెంట్ ప్రదర్శనలో కంట్రాస్ట్ రంగును కంట్రాస్ట్ రంగులో మరియు ప్రింట్ లో బ్లాక్ రంగులో చేయండి:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 9

కామా విభజిత జాబితా: కామా విభజిత జాబితాను ఇప్పటికే ఉన్న మీడియా క్వరీలకు జోడించండి (ఇది OR ఆపరేషన్ వంటి ప్రవర్తన కలిగి ఉంటుంది):

/* 600px మరియు 900px మధ్య విస్తరణ లేదా 1100px కంటే ఎక్కువ విస్తరణతో - <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;
  }
}

స్వయంగా ప్రయత్నించండి

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు @media నియమం ప్రథమ బ్రౌజర్ వెర్షన్ పూర్తిగా మద్దతు ఉంది అని చెప్పబడింది.

క్రోమ్ ఐఇ / ఎంజె ఫైర్ఫాక్స్ సఫారీ ఓపెరా
21 9 3.5 4.0 9