તમે સીએસએસ મીડિયા ક્વેરીઝ કેવી રીતે લખો છો?

મિનિ-પહોળાઈ અને મહત્તમ-પહોળાઈ મીડિયા ક્વેરીઝ બંને માટે સિન્ટેક્ષ

રિસ્પોન્સિવ વેબ ડિઝાઇન એ વેબપૃષ્ઠો બનાવવા માટેનો એક અભિગમ છે જ્યાં તે પૃષ્ઠો મુલાકાતીઓની સ્ક્રીનના આધારે તેમના લેઆઉટ અને દેખાવને ગતિશીલ રીતે બદલી શકે છે. મોટી સ્ક્રીનો તે મોટા ડિસ્પ્લે માટે અનુરૂપ લેઆઉટ પ્રાપ્ત કરી શકે છે, જ્યારે નાના ઉપકરણો, જેમ કે મોબાઇલ ફોન, એ તે જ વેબસાઇટને એવી રીતે ફોર્મેટ કરી શકે છે જે તે નાની સ્ક્રીન માટે યોગ્ય છે. આ અભિગમ બધા વપરાશકર્તાઓ માટે સારો વપરાશકર્તા અનુભવ પૂરો પાડે છે અને તે શોધ એંજિન રેકિંગમાં સુધારવામાં પણ મદદ કરી શકે છે. પ્રતિભાવ વેબ ડિઝાઇનનો એક મહત્વપૂર્ણ ભાગ સીએસએસ મીડિયા ક્વેરીઝ છે.

મીડિયા ક્વેરીઓ તમારી વેબસાઇટની CSS ફાઇલમાં થોડો શરતી વિધાનો જેવા છે, જેનાથી તમે અમુક ચોક્કસ સીએસએસ નિયમો સેટ કરી શકો છો જે ચોક્કસ શરત મળ્યા પછી જ અસર કરશે - જેમ કે જ્યારે સ્ક્રીનનું કદ ચોક્કસ થ્રેશોલ્ડથી ઉપર અથવા નીચે છે

એક્શનમાં મીડિયા ક્વેરીઝ

તો તમે વેબસાઇટ પર મીડિયા ક્વેરીઝ કેવી રીતે ઉપયોગ કરો છો? અહીં એક ખૂબ સરળ ઉદાહરણ છે:

1. તમે કોઈ પણ વિઝ્યુઅલ સ્ટાઇલથી મફત સ્ટ્રક્ચર્ડ HTML દસ્તાવેજથી શરૂ કરશો (તે છે કે CSS શું છે)
2. તમારી સીએસએસ ફાઇલમાં, તમે સામાન્ય રીતે પૃષ્ઠને સ્ટાઇલ કરીને અને વેબસાઇટ કેવી રીતે દેખાશે તે માટે એક પાયાની લાઇનિંગ સેટ કરીને તમે પ્રારંભ કરો છો. કહો કે તમે પૃષ્ઠના ફોન્ટનું કદ 16 પિક્સેલ્સ કરવા માંગો છો, તો તમે આ CSS લખી શકો છો: body {font-size: 16px; }
3. હવે, તમે મોટા સ્ક્રીન્સ માટે તે ફૉન્ટ કદ વધારી શકો છો કે જેની પાસે પૂરતી રિયલ એસ્ટેટ છે. આ તે છે જ્યાં મીડિયા ક્વેરી સાઇન ઇન કરે છે. તમે આ જેવી મીડિયા ક્વેરી પ્રારંભ કરશો: @ મીડિયા સ્ક્રીન અને (મિનિટ-પહોળાઈ: 1000px) {}
4. આ મીડિયા ક્વેરીનું વાક્યરચના છે. તે મીડીયા ક્વેરી પોતે સ્થાપિત કરવા માટે @ મીડિયા સાથે પ્રારંભ થાય છે. આગળ તમે "મીડિયા પ્રકાર" સેટ કરો, જે આ કિસ્સામાં "સ્ક્રીન" છે. આ ડેસ્કટોપ કોમ્પ્યુટર સ્ક્રીન્સ, ગોળીઓ, ફોન વગેરેને લાગુ પડે છે. છેલ્લે, તમે મીડિયા ક્વેરીને "મીડિયા સુવિધા" સાથે સમાપ્ત કરો છો. ઉપરનાં અમારા ઉદાહરણમાં, તે "મધ્ય પહોળાઈ: 1000px" છે આનો અર્થ એ કે મીડિયા ક્વેરી ડિસ્પ્લે માટે ઓછામાં ઓછી પહોળાઈ 1000 પિક્સેલ પહોળી હશે.

1. મીડિયા ક્વેરીના આ ઘટકો પછી, તમે કોઈ પણ સામાન્ય CSS નિયમમાં શું કરો છો તે સમાન ઓપનિંગ અને બંધ વાળું તાણવું ઉમેરો.
2. મીડિયા ક્વેરીનો અંતિમ પગલું એ સીએસએસ નિયમો ઉમેરવાનું છે કે જેને તમે આ શરત મળ્યા પછી તમે અરજી કરવા માંગો છો. તમે આ સીએસએસ નિયમો સર્પાકાર કૌંસ વચ્ચે ઉમેરો છો જે મીડિયા ક્વેરી બનાવે છે, જેમ કે: @ મીડિયા સ્ક્રીન અને (મિનિટ-પહોળાઈ: 1000px) {body {font-size: 20px; }
3. જ્યારે મીડિયા ક્વેરીની શરતો પૂરી થાય છે (બ્રાઉઝર વિંડો ઓછામાં ઓછી 1000 પિક્સેલ પહોળી છે), તો આ CSS શૈલી પ્રભાવિત થશે, અમારી સાઇટના ફોન્ટનું કદ 16 પિક્સેલ્સથી બદલીને અમે મૂળ 20 પિક્સેલ્સનાં અમારા નવા મૂલ્યમાં સ્થાપિત કર્યું છે.

વધુ શૈલીઓ ઉમેરી રહ્યા છે

તમારી વેબસાઇટની દૃશ્ય દેખાવને વ્યવસ્થિત કરવા માટે તમારે આ મીડિયા ક્વેરીમાં ઘણા સીએસએસ નિયમો મૂક્યા છે. હમણાં પૂરતું, જો તમે 20 પિક્સેલ્સ માટે ફૉન્ટ-કદમાં વધારો નહીં કરવા માગે છે, પણ તમામ ફકરાના રંગને કાળો (# 000000) માં બદલો છો, તો તમે આ ઉમેરી શકો છો:

@ મીડિયા સ્ક્રીન અને (મિનિટ-પહોળાઈ: 1000px) {body {font-size: 20px; } પૃષ્ઠ {color: # 000000; }}

વધુ મીડિયા ક્વેરીઝ ઉમેરવાનું

વધુમાં, તમે દરેક મોટા કદ માટે વધુ મીડિયા ક્વેરીઝ ઉમેરી શકો છો, જેમ કે આને તમારી શૈલી શીટમાં ઉમેરી રહ્યા છે:

@ મીડિયા સ્ક્રીન અને (મિનિટ-પહોળાઈ: 1000px) {body {font-size: 20px; } પૃષ્ઠ {color: # 000000; {} @ મીડિયા સ્ક્રીન અને (મિનિટ-પહોળાઈ: 1400 પીએક્સ) {body {font-size: 24px; }}

પ્રથમ મીડિયા ક્વેરીઝ, 1000 પિક્સેલ પહોળી પર ફૉન્ટ કરે છે, ફોન્ટનું કદ 20 પિક્સેલમાં બદલાય છે. પછી, એકવાર બ્રાઉઝર 1400 પિક્સેલ્સથી ઉપર હતું, ફોન્ટ કદ ફરીથી 24 પિક્સેલ્સમાં બદલાઇ જશે. તમે તમારા ચોક્કસ વેબસાઇટ માટે જરૂરી હોય તેટલી મીડિયા ક્વેરીઝ ઉમેરી શકો છો.

લઘુ-પહોળાઈ અને મહત્તમ-પહોળાઈ

"મિનિ-પહોળાઈ" અથવા "મહત્તમ-પહોળાઈ" નો ઉપયોગ કરીને મીડિયા ક્વેરીઝ લખવાનું સામાન્ય રીતે બે રીત છે. અત્યાર સુધી, અમે ક્રિયામાં "મિનિટ-પહોળાઈ" જોઇ છે એકવાર બ્રાઉઝર ઓછામાં ઓછા ન્યૂનતમ પહોળાઈ સુધી પહોંચે તે પછી મીડિયા ક્વેરીઝને પ્રભાવિત કરવા માટેનું કારણ બને છે. તેથી "MIN-width: 1000px" નો ઉપયોગ કરતા ક્વેરીનો ઉપયોગ ત્યારે થશે જ્યારે બ્રાઉઝર ઓછામાં ઓછું 1000 પિક્સેલ પહોળું હશે. મીડિયા ક્વેરીની આ શૈલીનો ઉપયોગ જ્યારે તમે "મોબાઇલ-પ્રથમ" રીતે કોઈ સાઇટ બનાવી રહ્યા હો ત્યારે થાય છે

જો તમે "મહત્તમ-પહોળાઈ" નો ઉપયોગ કરો છો, તો તે વિપરીત રીતે કામ કરે છે. બ્રાઉઝર આ કદ નીચે ઘટી જાય તે પછી "મહત્તમ-પહોળાઈ: 1000px" ની મીડિયા ક્વેરી લાગુ થશે.

જૂના બ્રાઉઝર્સ વિષે

મીડિયા ક્વેરીઝ સાથેની એક પડકાર એ ઈન્ટરનેટ એક્સપ્લોરર પરના જૂના સંસ્કરણોમાં ટેકોનો અભાવ છે. સંતોષપૂર્વક, પોલીફિલ્સ ઉપલબ્ધ છે જે તે જૂના બ્રાઉઝર્સમાં મીડિયા ક્વેરીઝ માટે સપોર્ટ પેચ કરી શકે છે, જ્યારે તમે તેને આજે વેબસાઇટ્સ પર વાપરવા માટે પરવાનગી આપે છે જ્યારે હજી પણ ખાતરી કરો કે તે સાઇટનું પ્રદર્શન જૂના બ્રાઉઝર સૉફ્ટવેરમાં ભાંગી પડતું નથી.

1/24/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત