diff options
| author | Divay Prakash <divayprakash@users.noreply.github.com> | 2020-01-11 14:20:39 +0530 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-01-11 14:20:39 +0530 |
| commit | 7d3d249df546604517e76b4e67784b9123ee6189 (patch) | |
| tree | 2f98be1dcbefbcdafabcaf2aa0b3a7af51621f16 /ta_in/css-ta.html.markdown | |
| parent | e924cf72fc57c911799d34359c1c88aac534c8a9 (diff) | |
| parent | 170f9c7f496866b83fa5f73f19e9a4bfc074e2f1 (diff) | |
Merge pull request #3691 from sridhareaswaran/patch-3
[css/ta_in] Update css-ta.html.markdown
Diffstat (limited to 'ta_in/css-ta.html.markdown')
| -rw-r--r-- | ta_in/css-ta.html.markdown | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/ta_in/css-ta.html.markdown b/ta_in/css-ta.html.markdown index cbe88f1e..4ea7f959 100644 --- a/ta_in/css-ta.html.markdown +++ b/ta_in/css-ta.html.markdown @@ -233,6 +233,48 @@ css முன்னுரிமை பின்வருமாறு * `B` இது அடுத்தது. * `D` இதுவே கடைசி . +## Media Queries [மீடியா குரிஸ்] + +CSS மீடியா குரிஸ் CSS 3 அம்சங்கள். பயன்படுத்தும் கணினி, கைபேசி அல்லது சாதனத்தின் பிஸேல் டென்சிட்டிக்கு ஏற்றவாறு மீடியா குரிஸ் விதிகளை பயன்படுத்தலாம். + +```css +/* அனைத்து டேவிஸ்களுக்கும் பொதுவான விதி */ +h1 { + font-size: 2em; + color: white; + background-color: black; +} + +/* பிரிண்ட் செய்யும்போது h1 கலர் மாற்ற */ +@media print { + h1 { + color: black; + background-color: white; + } +} + +/* 480 பிஸேல்ளுக்கு மேல் சிகிரீன் அளவு உள்ள சாதனத்தில் எழுத்து அளவு மிகை படுத்த */ +@media screen and (min-width: 480px) { + h1 { + font-size: 3em; + font-weight: normal; + } +} +``` + +மீடியா குரிஸ் வழங்கும் அம்சங்கள் : +`width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. இவையுள் பெரும்பான்மை `min-` அல்லது `max-` வுடன் பயன்படுத்தலாம் . + +`resolution` பழைய சாதனங்களில் பயன்படாது, எனவே `device-pixel-ratio` பயன்படுத்தவும். + +பல கைபேசி மற்றும் கணினிகள், வீடு கணினி திரை அளவு காட்ட முற்படும். எனவே `viewport` மெட்டா டேக் பயன்படுத்தவும். + +```html +<head> + <meta name="viewport" content="width=device-width; initial-scale=1.0"> +</head> +``` + ## css அம்சங்களின் பொருந்தகூடிய தன்மை பெரும்பாலான css 2 வின் அம்சங்கள் எல்லா உலாவிகளிலும் , கருவிகளிலும் உள்ளன. ஆனால் முன்கூட்டியே அந்த அம்சங்களை பரிசோதிப்பது நல்லது. |