നിങ്ങൾ എങ്ങനെയാണ് CSS മീഡിയ ചോദ്യങ്ങൾ എഴുതുക?

മിനിറ്റ് വീതിയും പരമാവധി വീതിയും മീഡിയ അന്വേഷണത്തിനുള്ള സിന്റാക്സ്

സന്ദർശകരുടെ സ്ക്രീനിന്റെ വലിപ്പം അടിസ്ഥാനമാക്കി ആ പേജുകൾ ചലനാത്മക രൂപത്തിൽ രൂപപ്പെടുത്താൻ കഴിയുന്ന പേജുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു സമീപനമാണ് റെസ്പോൺസ് വെബ് ഡിസൈൻ . വലിയ സ്ക്രീനുകൾക്ക് വലിയ ഡിസ്പ്ലേകൾക്ക് അനുയോജ്യമായ ഒരു ലേഔട്ട് ലഭിക്കും, കൂടാതെ ചെറിയ ഫോണുകൾ പോലുള്ള ചെറിയ ഉപകരണങ്ങൾക്ക് ചെറിയ സ്ക്രീനിൽ അനുയോജ്യമായ രീതിയിൽ ഫോർമാറ്റ് ചെയ്ത അതേ വെബ്സൈറ്റ് സ്വീകരിക്കാൻ കഴിയും. ഈ സമീപനം എല്ലാ ഉപയോക്താക്കൾക്കും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നു, തിരയൽ എഞ്ചിൻ റാങ്കിംഗുകൾ മെച്ചപ്പെടുത്താൻ പോലും ഇത് സഹായിക്കും. പ്രതികരിക്കുന്ന വെബ് രൂപകൽപ്പനയുടെ പ്രധാന ഭാഗമാണ് CSS മീഡിയ ചോദ്യങ്ങൾ.

മീഡിയാ അന്വേഷണങ്ങൾ നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ സി.എസ്.എസ്. ഫയലിൽ ഉള്ള ചെറിയ നിബന്ധന വ്യവസ്ഥകൾ പോലെയാണ്. ചില CSS നിയമങ്ങൾ ക്രമീകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അത് ഒരു നിശ്ചിത അവസ്ഥ ഉണ്ടാകുമ്പോൾ മാത്രമേ ഉണ്ടാകുകയുള്ളൂ - സ്ക്രീൻ സൈസ് മുകളിൽ അല്ലെങ്കിൽ ചില പരിധിക്ക് മുകളിലുള്ളത് പോലെ.

ആക്ഷൻ മീഡിയ മീഡിയ ക്വിറീസ്

ഒരു വെബ്സൈറ്റിൽ നിങ്ങൾ മീഡിയ അന്വേഷണങ്ങൾ എങ്ങനെയാണ് ഉപയോഗിക്കുന്നത്? വളരെ ലളിതമായ ഉദാഹരണം ഇതാ:

1. നിങ്ങൾ ഏതെങ്കിലും വിഷ്വൽ ശൈലികളെയെല്ലാം ചേർന്ന് നന്നായി രൂപപ്പെടുത്തിയ HTML പ്രമാണത്തോടൊപ്പം തന്നെ ആരംഭിക്കും (അതാണ് CSS എന്നതിനർത്ഥം)
2. നിങ്ങളുടെ സി.എസ്.എസ്. ഫയലിൽ, സാധാരണയായി നിങ്ങൾ പേജ് സ്റൈൽ ചെയ്തുകൊണ്ട് വെബ്സൈറ്റ് എങ്ങനെ കാണണമെന്നതിനുള്ള അടിസ്ഥാനത്തിൽ സജ്ജമാക്കിക്കൊണ്ട് തുടങ്ങും. പേജിന്റെ ഫോണ്ട് സൈസ് 16 പിക്സലുകൾ ആകണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഈ CSS എഴുതാം: body {font-size: 16px; }
3. ഇപ്പോൾ, നിങ്ങൾക്ക് വലിയ ഫോണ്ട് വലുപ്പമുള്ള വലുപ്പത്തിലുള്ള സ്ക്രീനുകളുടെ വലുപ്പം വർദ്ധിപ്പിക്കണം. ഇവിടെയാണ് മീഡിയ അന്വേഷണങ്ങൾ കിക്ക് ചെയ്യേണ്ടത്. നിങ്ങൾ ഇതുപോലെ ഒരു മീഡിയ അന്വേഷണം ആരംഭിക്കും: @ media screen (min-width: 1000px) {}
4. ഒരു മീഡിയ അന്വേഷണത്തിന്റെ സിന്റാക്സ് ഇതാണ്. മീഡിയ അന്വേഷണം സ്വയം സ്ഥാപിക്കാൻ അത് മീഡിയയിൽ ആരംഭിക്കുന്നു. അടുത്തതായി "മീഡിയാ ടൈപ്പ്" സെറ്റ് ചെയ്യുക, അത് കേസിൽ "സ്ക്രീൻ" ആണ്. ഇത് ഡെസ്ക്ടോപ്പ് കമ്പ്യൂട്ടർ സ്ക്രീനുകൾ, ടാബ്ലറ്റുകൾ, ഫോണുകൾ മുതലായവയ്ക്ക് ബാധകമാണ്. അവസാനമായി, "മീഡിയ സവിശേഷത" ഉപയോഗിച്ച് മീഡിയ അന്വേഷണം അവസാനിക്കുന്നു. മുകളിലുള്ള നമ്മുടെ ഉദാഹരണത്തിൽ അത് "മധ്യ വീതി: 1000px" ആണ്. ഇത് മീഡിയ അന്വേഷണം 1000 പിക്സൽ വീതി കുറഞ്ഞ വീതി പ്രദർശിപ്പിക്കും എന്നാണ്.

1. മീഡിയ അന്വേഷണത്തിന്റെ ഈ ഘടകങ്ങൾക്കുശേഷം, ഏതെങ്കിലും സാധാരണ സി.എസ്.എസ് നിയമത്തിൽ നിങ്ങൾ എന്തുചെയ്യുമെന്നതിന് സമാനമായ ഒരു ക്ലോക്കിംഗ് ബ്രേക്ക് ചേർക്കുക.
2. ഒരു മീഡിയ അന്വേഷണത്തിന്റെ അന്തിമ ഘട്ടം ഈ വ്യവസ്ഥ ഒരിക്കൽ കൂടി നിങ്ങൾക്ക് പ്രയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന CSS നിയമങ്ങൾ ചേർക്കുന്നതാണ്. നിങ്ങൾ മീഡിയാ അന്വേഷണം നിർമ്മിക്കുന്ന ചുരുളൻ ബ്രെയ്സുകൾക്കിടയിൽ ഈ CSS ചട്ടങ്ങൾ ചേർക്കുന്നു, ഇതുപോലെ: @ media screen (min-width: 1000px) {body {font-size: 20px; }
3. മീഡിയ അന്വേഷണത്തിന്റെ വ്യവസ്ഥകൾ നിറവേറ്റപ്പെടുമ്പോൾ (ബ്രൌസർ വിൻഡോ കുറഞ്ഞത് 1000 പിക്സൽ വീതമാണ്), ഈ CSS ശൈലി പ്രാബല്യത്തിൽ വരും, ഞങ്ങളുടെ സൈറ്റിന്റെ ഫോണ്ട് സൈറ്റിനെ 16 പിക്സലിൽ നിന്ന് മാറ്റുന്നു, തുടക്കത്തിൽ 20 പിക്സലിന്റെ പുതിയ മൂല്യം ഞങ്ങൾ സ്ഥാപിച്ചു.

കൂടുതൽ ശൈലികൾ ചേർക്കുന്നു

നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ ദൃശ്യപരത ക്രമപ്പെടുത്തുന്നതിന് ആവശ്യമായതിനേക്കാൾ ഈ മീഡിയ അന്വേഷണത്തിനുള്ളിൽ നിങ്ങൾക്ക് നിരവധി CSS നിയമങ്ങൾ നൽകാൻ കഴിയും. ഉദാഹരണത്തിന്, ഫോണ്ട്-സൈറ്റിന് 20 പിക്സൽ മാത്രമേ വർദ്ധിപ്പിക്കുകയുള്ളൂ, മാത്രമല്ല എല്ലാ ഖണ്ഡികകളേയും കറുപ്പ് (# 000000) എന്ന കളർ മാറ്റുകയും ചെയ്യാം:

@media സ്ക്രീനും (മിനിറ്റ് വീതി: 1000px) {body {font-size: 20px; } p {വർണ്ണം: # 000000; }}

കൂടുതൽ മീഡിയ ചോദ്യങ്ങൾ ചേർക്കുന്നു

കൂടാതെ, ഓരോ വലിയ വലിപ്പത്തിലും നിങ്ങൾക്ക് കൂടുതൽ മീഡിയ ചോദ്യങ്ങൾ ചേർക്കാൻ കഴിയും, അവ നിങ്ങളുടെ ശൈലി ഷീറ്റിലേക്ക് ഇത് ചേർക്കുന്നു:

@media സ്ക്രീനും (മിനിറ്റ് വീതി: 1000px) {body {font-size: 20px; } p {വർണ്ണം: # 000000; {} @media സ്ക്രീനും (മിനി-വീതി: 1400px) {body {font-size: 24px; }}

ആദ്യത്തെ മീഡിയ ചോദ്യങ്ങൾ 1000 പിക്സൽ വീതികളിൽ സജ്ജീകരിക്കും, ഫോണ്ട് സൈസ് 20 പിക്സൽ ആയി മാറ്റും. ബ്രൗസർ 1400 പിക്സലുകൾക്ക് മുകളിലാണെങ്കിൽ ഫോണ്ട് സൈസ് വീണ്ടും 24 പിക്സലുകളായി മാറും. നിങ്ങളുടെ പ്രത്യേക വെബ്സൈറ്റിന് ആവശ്യമായ നിരവധി മീഡിയ ചോദ്യങ്ങൾ നിങ്ങൾക്ക് ചേർക്കാൻ കഴിയും.

കുറഞ്ഞത്-വീതിയും പരമാവധി വീതിയും

"മിനി-വീതി" അല്ലെങ്കിൽ "പരമാവധി വീതി" ഉപയോഗിച്ച് മീഡിയ ചോദ്യങ്ങൾ എഴുതാൻ സാധാരണയായി രണ്ട് വഴികളുണ്ട്. ഇതുവരെ, ഞങ്ങൾ പ്രവർത്തിച്ചുകൊണ്ടിരിക്കുന്ന "മിൻ വിഡ്ത്ത്" കണ്ടു. കുറഞ്ഞത് ആ കുറഞ്ഞ വീതിയിലെങ്കിലും ഒരു ബ്രൌസറിൽ എത്തിച്ചേർന്നാൽ ഇത് മീഡിയ അന്വേഷണങ്ങൾ പ്രാബല്യത്തിൽ വരുത്തുന്നു. ബ്രൗസർ കുറഞ്ഞത് 1000 പിക്സൽ വീതിയുള്ളപ്പോൾ "മിനി-വീതി: 1000px" ഉപയോഗിക്കുന്ന ഒരു ചോദ്യം ബാധകമാകും. നിങ്ങൾ ഒരു "മൊബൈൽ-ആദ്യ" രീതിയിൽ ഒരു സൈറ്റ് നിർമ്മിക്കുമ്പോൾ മീഡിയ അന്വേഷണത്തിന്റെ ഈ രീതി ഉപയോഗിക്കുന്നു.

നിങ്ങൾ "പരമാവധി വീതി" ഉപയോഗിക്കുകയാണെങ്കിൽ, അതു വിപരീത രീതിയിൽ പ്രവർത്തിക്കുന്നു. ബ്രൌസർ ഈ വലിപ്പത്തിന് താഴെ വീണു കഴിഞ്ഞാൽ "പരമാവധി വീതി: 1000px" എന്ന ഒരു മീഡിയ അന്വേഷണം ബാധകമാകും.

പഴയ ബ്രൗസറുകളെക്കുറിച്ച്

ഇന്റർനെറ്റ് എക്സ്പ്ലോററിലെ പഴയ പതിപ്പുകളിലെ പിന്തുണയുടെ കുറവാണ് മീഡിയ അന്വേഷണങ്ങളുള്ള ഒരു വെല്ലുവിളി. ഈ പഴയ ബ്രൌസറുകളിൽ മീഡിയ അന്വേഷണത്തിനുള്ള പിന്തുണ പാച്ച് ചെയ്യാൻ കഴിയുന്ന പോളിഫിഫില്ലുകൾ ഇന്ന് തന്നെ വെബ്സൈറ്റുകളിൽ ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുകയും, ആ സൈറ്റിന്റെ പ്രദർശനം പഴയ ബ്രൌസർ സോഫ്റ്റ്വെയറിൽ തകർത്തില്ലെന്ന് ഉറപ്പുവരുത്തുകയും ചെയ്യുന്നു.

എഡിറ്റർ ചെയ്തത് ജെറമി ഗിർാർഡ് 1/24/17