የሲ ኤስ ሲ አማካሪያዊ መጠይቆችን እንዴት እንደሚፅፉ?

ለሁለቱም ትንሹ ስፋትና ከፍተኛ-ሚዲያ መጠይቆች መጠቅለያ

ምላሽ ሰጪ የድር ዲዛይን እነዚያ ገጾች በሚጎበኝ ማያ ገጽ መጠን ላይ ተመስርተው አቀማመጦቻቸውን እና ገጽታቸውን በሚቀይሩበት ድረገፅ ላይ የመገንቢያ አቀራረብ ናቸው. ትላልቅ ማያ ገጾች ለእነዚህ ትላልቅ ማሳያዎች ተገቢ የሆነ አቀማመጥ ሊቀበሉ ይችላሉ, እንደ ሞባይል ስልኮች ያሉ ትናንሽ መሳሪያዎች ለዚያ ትንሽ መጠን ለሚመች ተመሳሳይ ድርጣብያን የተመሳሳይ ድር ጣቢያ ሊያገኙ ይችላሉ. ይህ አካሄድ ለተጠቃሚዎች የተሻሉ የተጠቃሚ ተሞክሮዎችን ያቀርባል እና የፍለጋ ሞተራዊነትን ደረጃ ለማሻሻል ሊረዳ ይችላል. ምላሽ ሰጪ የድር ዲዛይን አስፈላጊ ክፍል የሲ ኤስ ሲ የሚዲያ መጠይቆችን ነው.

የሚዲያ መጠይቆች በድር ጣቢያዎ የ CSS ፋይሉ ውስጥ ልክ እንደ ትንሽ ልክታዊ መግለጫዎች ናቸው, ይህም አንድ ሁኔታ ከተሟላ በኋላ ብቻ የሚወስን የተወሰኑ የሲ.ኤስ. ደንቦችን እንዲያወጡ ያስችልዎታል - ልክ እንደ የሆነ የተወሰኑ ደረጃዎች ከላይ ወይም ከታች ዝቅ ያለ ከሆነ.

የሚዲያ መጠይቆች በተግባር

ስለዚህ በአንድ ድር ጣቢያ ላይ የመድኪ መጠይቆችን እንዴት ይጠቀማሉ? አንድ በጣም ቀላል ምሳሌ ይኸውልዎት:

1. ከማንኛውም የሚታዩ ቅጦች (የሲ.ኤስ.ኤ. ለሚለው ነው) በጥሩ የተቀናበረ ኤችቲኤምኤል ሰነድ ይጀምራሉ.
2. በእርስዎ የሲ ኤስ ሲ ፋይል ውስጥ, ገፁን በማስተካከል እና የድር ጣቢያው እንዴት እንደሚታይ መነሻ መስመር ማዘጋጀት ይጀምራሉ. የገጹ የቅርጸ ቁምፊ መጠን 16 ፒክስሎች መሆን እንደሚፈልጉ ይናገሩ ይህንን CSS መፃፍ ይችላሉ-body {font-size: 16px; }
3. አሁን ለዚያ ትላልቅ ማያ ገጾች ለዚያ ሰፋፊ እርሻዎች የሚሆን የቅርጸ ቁምፊ መጠን መጨመር ይፈልጉ ይሆናል. ይህ የመገናኛ ጥያቄዎችን በሚጠይቁበት ቦታ ነው. እንዲህ አይነት የመገናኛ ጥያቄ እንዲህ ይጀምራል: @media screen እና (min-width: 1000px) {}
4. ይህ የመገናኛ ጥያቄ አገባብ ነው. የ Media Demonstration itself ለማቋቋም በ @myedia ይጀምራል. በመቀጠል በዚህ ጊዜ "ማያ" የሚለውን "የግፊት አይነት" ያዘጋጃሉ. ይሄ የዴስክቶፕ ኮምፒተር ማሳያዎችን, ታብሮችን, ስልኮችን, ወዘተ ያገለግላል. በመጨረሻም የመገናኛ ጥያቄን በ "ሚዲያ ባህሪ" ያበቃል. ከላይ በምሳሌአችን ውስጥ "መካከለኛ ስፋት: 1000 ፒክሰል" ነው. ይህ ማለት የመገናኛ ጥያቄው ቢያንስ 1000 ፒክሰሎች ስፋቶች ለትዕለቶች ይነሳል ማለት ነው.

1. ከሜዲኬር መጠይቅ እነዚህ አስፈላጊ ነገሮች በኋላ, በማንኛውም የተለመደው የሲሲኤስ ደንብ ላይ ማድረግ ከሚችሉት ጋር ተመሳሳይ የመክፈቻ መከለያና መዝጋትን ይደብቃሉ.
2. ወደ ሚዲያ ጥያቄ መጠይቅ የመጨረሻ ደረጃ ይህ ሁኔታ ሲሟላ ማመልከት የሚፈልጉትን የ CSS መመሪያዎችን ማከል ነው. እነኚህን የሲኤስሲ ህጎች በ "ሚድኒንግ" መጠቆሚያዎች መካከል በሚቀጥሉት ማጠቢያዎች መካከል ታክላለህ: @media screen እና (min-width: 1000px) {body {font-size: 20px; }
3. የመገናኛ ጥያቄው ሁኔታ ሲሟላ (የአሳሽ መስኮቱ ቢያንስ 1000 ፒክስል ስፋት), የ CSS ቅርጸቱ ይተገበራል, የጣቢያችን የቅርጸ ቁምፊ መጠን ከ 16 ፒክስሎች መጀመሪያ አዲስ አረንጓዴው 20 ፒክሰሎች ነው.

ተጨማሪ Styles Adding

የድር ጣቢያዎን ምስላዊ ገጽታ ለመለወጥ በሚያስፈልግዎ የ Media ደንብ ውስጥ ብዙ የ 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; {} @media screen እና (min-width: 1400px) {body {font-size: 24px; }}

የመጀመሪያው የመገናኛ ጥያቄዎችን በ 1000 ፒክስል ስፋት ይጀምራል, የቅርጸ-ቁምፊ መጠኑን ወደ 20 ፒክሰሎች ይቀይራል. ከዚያ, አሳሹ አንዴ ከ 1400 ፒክሰሎች በላይ ከሆነ የቅርጸ ቁምፊ መጠን ወደ 24 ፒክሰሎች ይቀይራል. ለተጠቀሰው ድህረገጽ ብዙ የ Media Queries መጨመር ይችላሉ.

አነስተኛ-ስፋት እና ከፍተኛ-ስፋት

የማህደረ መረጃ መጠይቆችን ለመጻፍ ሁለት አይነት መንገዶች አሉ - "ታች-ስታን" ወይም "ከፍተኛ-ስፋት" በመጠቀም. እስካሁን ድረስ "ትንሹ ስፋት" በድርጊት አይተናል. ይሄ አንድ አሳሽ ቢያንስ ቢያንስ ዝቅተኛው ስፋት ላይ እንደደረሰ የመገናኛ ጥያቄዎችን እንዲተገበር ያደርጋል. ስለዚህ "አሳንስ-ፊደል: 1000 ፒክስል" የሚጠቀም መጠይቅ አሳሹ ቢያንስ 1000 ፒክስል ስፋት ሲኖረው ይተገበራል. ይህ የሜዲኬራዊ መጠይቅ ቅጥያ «ሞባይል-የመጀመሪያ» በሆነ መንገድ ሲገነቡ ስራ ላይ ይውላል.

«ስፋት-ወርድ» የሚጠቀሙ ከሆነ, በተቃራኒው መንገድ ይሰራል. አንድ አሳሽ ፍሰቱ ከዚህ መጠን በታች ከወደቀ በኋላ የ "ከፍተኛ-ወርድ 1000 ፒክስል" የመልዕክት መጠይቅ ተግባራዊ ይሆናል.

የቆዩ አሳሾችን በተመለከተ

በማህደረ መረጃ መጠይቆች ላይ አንድ ችግር የፈተናቸው በ "ኢንተርኔት ኤክስፕሎረር" አሮጌ ስሪቶች ነው. ደስ የሚለው, በእነዚያ የቀድሞ አሳሾች ውስጥ ለ Media Queries የሚደግፉ ፖምፖች ማግኘት ይቻላል , ይህም የዚያ ጣቢያ ማሳያ አሁንም በአዛውንቶች የአሳሽ ሶፍትዌር የማይጠፋ መሆኑን ለማረጋገጥ በድር ጣቢያዎች ላይ እንዲጠቀሙበት ያስችልዎታል.

በጄረሚ ጋራርድ የተስተካከለው እ.ኤ.አ. 1/24/17