CSS මාධ්ය විමසුම් ලියන්නේ කෙසේද?

Min-width සහ max-width මාධ්ය විමසුම් දෙකම සඳහා වන රීතිය

ප්රතිචාරාත්මක වෙබ් මෝස්තරය යනු එම වෙබ් පිටු ගොඩනගා ගැනීමට වෙබ් අඩවි වලට පිවිසීමේ ප්රවේශයක් වන අතර එමඟින් අමුත්තන්ගේ තිර ප්රමාණයෙන් ඔවුන්ගේ පෙනුම හා පෙනුම ගතිකව වෙනස් කළ හැකිය. විශාල තිරයන්ට එම විශාල සංදර්ශකයන්ට ගැලපෙන සැලැස්ම ලැබිය හැකි අතර කුඩා ජංගම උපාංග වැනි කුඩා උපාංගයන් එම කුඩා තිරයට ගැලපෙන ආකාරයෙන් ආකෘතිකරණය කළ හැකිය. මෙම ප්රවේශය සියලු පරිශීලකයින් සඳහා වඩා හොඳ පරිශීලක අත්දැකීමක් ලබා දෙන අතර එය සෙවුම් යන්ත්ර ශ්රේණිගත කිරීම වැඩිදියුණු කිරීමට උපකාරී වේ. ප්රතිචාරාත්මක වෙබ් නිර්මාණයක වැදගත් කොටසක් වන්නේ CSS මාධ්ය විමසුම්.

මාධ්ය විමසුම් ඔබේ වෙබ් අඩවියේ සීඑස්එස් ගොනුව තුළ කුඩා වාක්ය ප්රකාශයන් වගේ කුඩා CSS ගොනුවක් තුළ ඔබට යම් නිශ්චිත කොන්දේසියක් සපුරාලන විට පමණි.

ක්රියාකාරී මාධ්ය විමසුම්

ඉතින් කොහොමද ඔබ වෙබ් අඩවි මත මාධ්ය විමසුම් භාවිතා කරන්නේ? මෙන්න ඉතා සරල උදාහරණයකි:

1. ඔබට ඕනෑම දෘෂ්ය විලාසිතාවලින් තොරව හොඳින් ව්යුහාත්මක HTML ලියවිල්ලකින් ආරම්භ වනු ඇත (CSS යනු එයයි)
2. ඔබේ CSS ගොනුවේ, ඔබ විසින් සාමාන්යයෙන් වෙබ් පිටුව අලූත් කිරීම ආරම්භ කර, වෙබ් අඩවිය බැලූවේ කෙසේද යන්න පිළිබඳ මූලික පදය සැකසීම ආරම්භ වනු ඇත. ඔබට පිටුවෙහි අකුරු ප්රමාණය 16 පික්සල් කිරීමට අවශ්ය බව ඔබට කියන්න, ඔබට මෙම CSS ලිවිය හැකිය: body {font-size: 16px; }}
3. දැන්, ඔබට විශාල දේපළක් ඇති විශාල තිර සඳහා විශාල අකුරු ප්රමාණය වැඩි කිරීමට අවශ්ය විය හැකිය. Media Queries ආරම්භ වන්නේ මෙයයි. ඔබ මෙබඳු මාධ්ය විමසුමක් ආරම්භ කරනු ඇත: @media screen සහ (min-width: 1000px) {}
4. මාධ්ය විමසුමක රීතිය මෙයයි. Media Query මඟින් ස්ථාපනය කිරීම සඳහා @media ආරම්භ වේ. ඊලඟට ඔබ "මාධ්ය වර්ගය" සැකසූ අතර, මෙය "තිරය" ලෙස දැක්වේ. මෙය ඩෙස්ක්ටොප් පරිගණක තිර, ටැබ්ලට්, දුරකථන, ආදියයි. අවසාන වශයෙන්, මාධ්ය විමසුම අවසන් කරන්නේ "මාධ්ය විශේෂාංගය" යන්නයි. ඉහත උදාහරණයේ දී, එය "මධ්ය-පළල: 1000px" වේ. මෙයින් අදහස් වනුයේ මාධ්ය විමසුම පුළුල් පරාසයක පළල 1000 ක පළලක් සහිත දර්ශන සඳහා ප්රදර්ශනය වනු ඇත.

1. Media Query හි මෙම අංගයන්ගෙන් පසුව, ඔබ ඕනෑම සාමාන්ය CSS නීතියක් තුළ ඔබ කළ යුත්තේ කුමක් ද යන්නට විවෘත සහ වසා දැමීමේ සඟල වරහන එකතු කරන්න.
2. මාධ්ය විමසුමකට අවසන් පියවර වනුයේ ඔබ මෙම කොන්දේසිය සපුරා ඇති පසු අයදුම් කිරීමට අවශ්ය CSS නීති එකතු කිරීමයි. මෙබඳු ආකාරයේ මාධ්ය විමසුම සෑදීමට මෙම CSS නීති එකතු කරයි: @media screen සහ (min-width: 1000px) {body {font-size: 20px; }}
3. මාධ්ය විමසුමෙහි කොන්දේසි සපුරා ඇති විට (බ්රවුසර් කවුළුව අඩු වශයෙන් පික්සල් 1000 ක් පමණ), මෙම CSS ශෛලය ක්රියාත්මක වන අතර, අපේ වෙබ් අඩවියේ අකුරු ප්රමාණය 16 පික්සල් 20 ක නව අගයක් දක්වා අප ස්ථාපනය කරන ලද පික්සල් 16 සිට වෙනස් කර ඇත.

තවත් විලාසිතා එකතු කිරීම

ඔබේ වෙබ් අඩවියේ දෘශ්ය පෙනුම වෙනස් කිරීම සඳහා අවශ්ය පරිදි මෙම මාධ්ය විමසුම තුළ බොහෝ CSS නීති රිසි විය යුතුය. නිදසුනක් ලෙස, ඔබට ෆොන්ට-ප්රමාණය දක්වා පික්සල 20 දක්වා වැඩි කිරීමට අවශ්ය වුවද, සෑම ඡේදයකම කළු පාට (# 000000) වර්ණය වෙනස් කිරීම සඳහා ඔබට මෙය එකතු කළ හැකිය:

@media screen සහ (min-width: 1000px) {body {font-size: 20px; } p {වර්ණය: # 000000; }}

තවත් මාධ්ය විමසුම් එකතු කිරීම

මීට අමතරව, ඔබට තවත් විශාල ප්රමාණන සඳහා තවත් මාධ්ය විමසුම් එකතු කළ හැකිය, මේ ආකාරයට ඔබේ ස්ටයිල් පත්රයට එකතු කිරීම:

@media screen සහ (min-width: 1000px) {body {font-size: 20px; } p {වර්ණය: # 000000; {} @ මාධ්යය තිරය සහ (min-width: 1400px) {body {font-size: 24px; }}

පළමූ මාධ්ය විමසුම් පළල් 1000 දී විහිදෙනු ඇත, ෆොන්ටය ප්රමාණය පික්සල් 20 දක්වා වෙනස් කිරීම. එවිට, බ්රවුසරය පික්සල 1400 ට වඩා වැඩි වූ විට, ෆොන්ට් ප්රමාණය යළිත් පික්සල 24 දක්වා වෙනස් වනු ඇත. ඔබේ වෙබ් අඩවියට අවශ්ය තරම් මාධ්ය විමසුම් ගණනක් එකතු කළ හැකිය.

මිනුම් පළල සහ මැක්ස්-පළතුරු

මාධ්ය විමසුම් ලිවීමට ක්රම දෙකක් තිබේ. - "min-width" හෝ "max-width" භාවිතා කිරීමෙනි. මේ වන විට අපි "මිනුම්-පළල" දැක තිබෙනවා. බ්රවුසරය අවම වශයෙන් එම අවම පළල ළඟා වූ විට මාධ්ය විමසුම් ක්රියාත්මක වීමට හේතු වේ. එබැවින් බ්රවුසරය අවම වශයෙන් පික්සල් 1000 ක් පමණ වන විට "min-width: 1000px" භාවිතා කරන විමසුම අදාළ වේ. ඔබ විසින් "ජංගම-පළමු" ආකාරයෙන් වෙබ් අඩවියක් ගොඩනගනු ලබන විට මාධ්ය විමසුම මෙම විලාසය භාවිතා වේ.

ඔබ "max-width" භාවිතා කරන්නේ නම්, එය ප්රතිවිරුද්ධ ආකාරයට ක්රියා කරයි. මෙම ප්රමාණයෙන් පහළට වැටෙන බ්රවුසරය වරක් "max-width: 1000px" පිළිබඳ මාධ්ය විමසුම.

පැරණි වෙබ් බ්රව්සර සඳහා

මාධ්ය විමසුම් සමඟ එක් අභියෝගයක් වන්නේ Internet Explorer හි පැරණි අනුවාද වල සහාය නොමැති වීමයි. ස්තුතියි, පැරණි බ්රවුසර වල මාධ්ය විමසුම් සඳහා උපකාරක පොලිෆිල්ස් ලබා ගත හැකි බහුපීඩන තිබේ , වර්තමානයේ වෙබ් අඩවිවල ඒවා භාවිතා කිරීමට ඉඩ ලබා දෙමින්, පැරණි වෙබ් බ්රවුසරයේ මෘදුකාංගය ප්රදර්ශනය කිරීම නොපෙනේ.

1/24/17 මත ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලදි