የሲ ኤስ ኤስ ሚዲያ መጠይቆች: ደረጃ መግለጫ, ባህሪያት እና ግምገማዎች በ ደረጃ

ከዕለታት አንድ ቀን, ድር ጣቢያዎችን ለመጎብኘት ሰዎች ስልኮች እና ሌሎችም ብቻ የምትስቁ የሚያስከትሉ ተመሳሳይ ተንቀሳቃሽ መሣሪያዎች. ይህ አስፈላጊ ነው ለምን እንደዚህ ያለ ምቹ ዴስክቶፕ ኮምፒውተሮች አለ; ምክንያቱም ብዙዎች በቀላሉ መረዳት አልቻለም! ወይም, በ የከፋ, የጭን. በተጨማሪም, የሞባይል ኢንተርኔት ከዚያም ውድ ነበር.

ጊዜ አልፏል. ኢንተርኔት ርካሽ ሆኗል. ሽያጭ ተጨማሪ እና ተጨማሪ ስልኮች እና ጡባዊዎች ወጣ. ከተወሰነ ጊዜ በኋላ, ታዋቂ ጣቢያዎች ባለቤቶች በራሱ scratching ግራ ያጋባቸዋል. ስታቲስቲክስ መሠረት, ይህም ያላቸውን ሀብቶች አንድ የቆመን ፒሲ ጋር ይልቅ ያላቸውን ስልኮች ለመጎብኘት አጋጣሚያቸው ሰፊ እንደሆነ ተገለጠ!

በዚያን ጊዜ ጣቢያዎች በተንቀሳቃሽ መሣሪያዎች ላይ ለእይታ የተመቻቹ አልተደረጉም. በስልክዎ ላይ ያለውን አሮጌ ሕይወት በመሄድ, እናንተ አነስተኛ ፊደላት, አነስተኛ ምናሌ ንጥሎች እና የማይመች አዝራሮች ጋር ይዘት መሆን ነበር.

የሲ ኤስ ኤስ ሚዲያ መጠይቆች መፈልሰፍ

ከማንኛውም ማያ ገጽ ሆነው መታየት ጊዜ መልካም መመልከት እንዲችሉ ሀብቶች መሰንዘር አስፈላጊ ነበር. በመጀመሪያ ለእያንዳንዱ መጠን የተለያዩ ጣቢያዎችን ማቋቋም ልማድ ለማዳረስ. ለምሳሌ ያህል, በአንድ የሞባይል ስልክ የሚጠቀሙ ጎብኚዎች, በአንድ ሃብት, እና ከኮምፒውተርዎ ጋር "ተቀምጠው" ነው አንድ ላይ ያገኛሉ - በሌላው ላይ. ነገር ግን አንድ ረጅም ውድ እና የማይመች ነበር.

ከዚያም CSS3 ሚዲያ መጠይቆች መጣ. ከእነሱ ጋር ተለዋዋጭ ንድፍ ተግባራዊ ያለውን ተራ አጋጣሚ መጣ.

ተለዋዋጭ ንድፍ ምንድን ነው?

የ ሀብት ገጽታ ነው በማሰስ የትኛው ላይ የማያ መጠን መሠረት ይለውጣል ከሆነ ይህ ቃል ጥቅም ላይ ይውላል. ይህን እንዴት መረዳት? በጣም ቀላል ነው.

አንድ ድር ጣቢያ አለህ እንበል. በውስጡ የላይኛው ክፍል ውስጥ የአሰሳ ምናሌ አለ. አግድም. ይህ ገጽ መላውን ስፋት ላይ ይዘልቃል. ከዚህ በታች የእውቂያ መረጃ ጋር የማገጃ ነው. ስልክ እና አድራሻ እንዲሁም ሁለት ብሎኮች መራራቅ እና እርስ በእርስ አጠገብ በአግድም ዝግጅት ነው. ይህ የማገጃ ስር - ዋና ይዘት, እና ወደ ግራ ወይም ወደ ቀኝ የጎን ነውና ላይ. ከታች, እንደተለመደው, ግርጌ አድርጎ.

ይህ "ጥንታዊው" አቀማመጥ ንድፍ. ይህ የግል ኮምፒውተር ፍጹም, ነገር ግን የሞባይል ስልኮች በጣም አመቺ አይደለም. አግድመት ምናሌ በጣም ሰፊ ነው. እውቂያዎች እርስ የራቀ የሚገኙት ናቸው. የጎን መረጃ መጠቀም እና በሙሉ ማያ ገጹን ለማሸብለል አለን, እና የሁሉንም ጣዕም ለማድረግ አይደለም ይሆናል.

ችግሩ CSS3 ሚዲያ መጠይቆች ጋር የመላመድ እና ተንቀሳቃሽ ዲዛይን በመጠቀም ሊቀረፍ ይችላል. ሚዲያ መጠይቆች በመጠቀም, እኛ አሁን እንደዚህ ይሰራል ... ይዘት አካባቢ ያደረጉበትን:

• ከላይ - ቋሚ የዳሰሳ ምናሌ ጋር አሃድ;
• ይህም በታች - አሁን ደግሞ ሽቅብ የሚቀመጡ ናቸው የትኞቹ ዕውቂያዎች, ጋር የማገጃ;
• የጎን ይዘት <ዋና> መለያ ይዘት ጎን ላይ ይታያል, እና ከላይ ነው.

ይህ ምላሽ የድር ዲዛይን ሚዲያ መጠይቆች ጋር ሊደረግ ይችላል ነገር ቀላል ምሳሌ ነው. እንዲያውም ብዙ ተጨማሪ አጋጣሚዎች.

ስለዚህ የሚዲያ መጠይቆችን ምንድን ነው?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. የሲ ኤስ ኤስ ስር የሚዲያ መጠይቆች CSS3 ገጹ ይዘት በተወሰኑ ሁኔታዎች ጋር ማስማማት ማድረግ የሚችል ጋር ቃል ሞዱል: እረዳለሁ. ለምሳሌ ያህል, የማያ ገጽ መጠን, ወይም አቀማመጥ መሳሪያ (በቁመት / በጎን) ምላሽ መስጠት ይጀምራል.

ስርዓቱ አስፈላጊ ይዘት ለመቀየር ይረዳል እንደ? ይህ የሚዲያ መጠይቆች ይጠቀማል. እነዚህ የተወሰኑ ልኬቶችን እንዲገልጹ. አንድ ጎብኚ ጣቢያ መጥቶ የነበረ አንድ መሣሪያ ቅድመ-በሐኪም ቅጦች ጨምሮ እነዚህ መለኪያዎች, የሚያሟላ ከሆነ. እነዚህ አጠቃላይ የሲ ጠረጴዛ እንደ የተጻፈ, ወይም በተለየ ፋይል ውስጥ ይችላል.

የሲ ኤስ ኤስ ሚዲያ መጠይቆች የአሳሽ ተኳሃኝነት

Safari до Chrome. ሁሉም ዘመናዊ አሳሾች Safari የመጣ ወደ Chrome, ይህ ቴክኖሎጂ ይደግፋሉ. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. እርግጥ ነው, የ Internet Explorer ስሪት ተጠቃሚዎች ችግር ... ነገር ግን ዎቹ በሐቀኝነት ፊት ለፊት እናድርግ - አሁንም ችግር ሊያስከትል ይችላል ስለማንኛውም ነገር, በዕድሜ በ IE እየተጠቀሙ ሰዎች.

የአገባብ አዳፕቲቭ አቀማመጥ ሚዲያ መጠይቆች

html. HTML ወደ ቅጥ ፋይል ሲገናኝ ምናልባት ሚዲያ መጠይቆችን ተጋልጠው ሊሆን. ይህ መስመር አስታውስ? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. <አገናኝ የ rel = 'stylesheet' አይነት = 'ጽሑፍ / ኤስ ኤስ «href = http: // ጣቢያ /article/320575/%E2%80%99style.css%E2%80%99%3E አንዳንድ ጊዜ መጨረሻ ላይ ሌላ ግቤት ያክላል, እንደ ተመለከተ ማን: የሚዲያ = 'ማያ ገጽ ».

ይህ የሚዲያ መጠይቅ ነው! እሱም በተጠቀሰው ቅጥ ፋይል ቴሌቪዥኖች የታጠቁ መሣሪያዎች ላይ ይሰራሉ መሆኑን ይጠቁማል. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. ይልቅ, አንተ ማያ ህትመት መጥቀስ ይቻላል - ገጹን ታትሞ ከሆነ በዚህ ሁኔታ ውስጥ, የፋይሉን ቅጦች, ተግባራዊ ናቸው.

የሚከተሉትን ባህሪያት መጠቀም ይችላሉ:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; - ሁሉም ዝምታ ጥቅም አቀፋዊ ስሪት:, በሁሉም ሁኔታዎች ውስጥ ይተገበራል;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - ማያ (ኮምፒዩተሮች, ላፕቶፖች, ጡባዊዎች, ስልኮች, እና ሁሉም አንድ ማሳያ ጋር የተገጠመላቸው ነው);
• принтеры; የህትመት - አታሚዎች;
• – проекторы; ትንበያ - ፕሮጀክተር;
• – речевые браузеры; የንግግር - ንግግር አሳሾች;
• – для устройств для слабовидящих; ብሬይል - ማየት ለተሳናቸው የሚሆን መሣሪያዎች;
• – для экранов телевизоров. TV - የቴሌቪዥን ማያ.

ይህ ሁሉ አይደለም. , но они используются редко. አለ በርካታ ተጨማሪ የሲ ሚዲያ መጠይቆች ባሕርያት ናቸው, ነገር ግን አልፎ አልፎ ጥቅም ላይ ይውላሉ. all. በተጨማሪም, አንድ ልኬት መጥቀስ አይደለም - በሁሉም ላይ ነባሪ.

የሚዲያ መጠይቆች አወቃቀር

css. ይልቅ ቅጥ ፋይል በመፍጠር ፋንታ, CSS ኮድ መጠቀም ይችላሉ. ይህን ይመስላል:

(тут будут стили } @media ማያ ገጽ እና (ከፍተኛ-ስፋት: 1024px) {( አሉ ቅጦች}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. እና ተጨማሪ ልኬቶችን - የሚዲያ መጠይቅ ጥቅም ላይ በግልጽ ያደርገዋል @media መመሪያ, በኋላ, መሳሪያ (ወደ ማያ ገጹ) ዓይነት የሚያሳይ ማስረጃ የለም. Max Width. በዚህ ምሳሌ ውስጥ, የሲ ሚዲያ መጠይቆች ማክስ ስፋት ንብረት ይጠቀሙ. px. ይህ ቅንፎች ውስጥ የተዘረዘሩትን ቅጦች ተሳታፊ ይሆናል ማለት ነው, ቢኖር 1024 ፒክስል ይልቅ የመሣሪያ የማያ መጠን ተጠቃሚው. и and не обязательны. ማያ ገጽ እና እንዲሁም አስገዳጅ አይደለም. ይህን መጻፍ ይችላሉ:

@media (ከፍተኛ-ስፋት: 1024px) {}

እንዲህ ያለ ሁኔታ ውስጥ, ወደ ንብረቶች በማንኛውም መሣሪያ ላይ የሚውለው ብቻ ሳይሆን ቴሌቪዥኖች የተገጠመላቸው ናቸው እነዚያ.

በርካታ መለኪያዎች ሳይጠቅሱ

የ ቅጥ ለመምረጥ ስራ ላይ ይውላል የተለያዩ መሣሪያዎች ክልል ለመገደብ ይፈልጋሉ እንበል. px, но не больше 500 px. የአምላክ አንድ ዘመናዊ ስልክ ከ ጣቢያ ይጎብኙ ሰዎች ብቻ ሰዎች ባህርያት ማሳየት ይፈልጋሉ እንበል, የማያ ገጽ መጠን ከ 320 ፒክስል; ነገር ግን ከእንግዲህ ወዲህ ከ 500 ፒክስል አይደለም. እንዲህ ያለ ሁኔታ ውስጥ, ጥያቄው ቅጽ ይወስዳል:

@media (ደቂቃ-ስፋት: 320) እና (ከፍተኛ-ስፋት: 500 ፒክሰል) {}

and. እርስዎ ፕሮግራም ጋር በደንብ ከሆኑ, ከዋኝ ተግባራዊ ሲሆን ነገር ምን እንደሆነ ታውቃላችሁ ፊላዴልፊያ. የማያውቁ ሰዎች የሚሆን: ሁለቱም ሁኔታዎች እውነት ናቸው ከሆነ ይፈትሻል. መጠይቅ ማያ ውስጥ ሠ ማግበር ንብረቶች ከ 500 ፒክስል አይደለም 320 ያነሰ እንጂ መሆን አለበት.

and не ограничивается одним. እና አንቀሳቃሾች ቁጥር አንድ የተወሰነ አይደለም. አንተ እንደ ያህል የሚፈልጉትን አድርጎ ማስቀመጥ ይችላሉ. ቴሌቪዥኖች ለ - ለምሳሌ ያህል, ስልኮች እና ፈጽሞ የተለየ የሚሆን የተወሰነ መጠን ማያ ለመፍጠር ይሞክሩ.

አንድ አስፈላጊ ነጥብ - የተጠቃሚው መሣሪያ ዝንባሌ. ወደ የመሬት ገጽታ ጋር - በቁም አቀማመጥ የእርስዎን ዘመናዊ ስልክ, ሰው ላይ ድረ ገጾችን አንድ ሰው. orientation:portrait, для вторых, соответственно, orientation:landscape. የቀድሞውን ያህል, አንድ ተጨማሪ ሁኔታ አቀማመጥ ያስፈልግዎታል: በቁመት, ሁለተኛው, በቅደም ተከተል, አቀማመጥ ለ: በጎን. @media. እነዚህ መስመሮች ደግሞ @media ቡድን በሚከተሉት በቅንፍ ውስጥ ይታያሉ. and. በእናንተ በኩል እነሱን ማጋራት ይችላሉ.

ሌላው ትኩረት የሚስብ ያነብበዋል. and вы вполне можете использовать оператор or. ይልቅ, እና በደንብ ወይም ከዋኙ መጠቀም ይችላሉ. እርሱ እውነተኛ መሆን ጥያቄ ውስጥ ቢያንስ አንድ ሁኔታ ያስፈልገዋል! ለምሳሌ ያህል:

) {} @media (ከፍተኛ-ስፋት: 500 ፒክሰል) ወይም (አቀማመጥ: በቁመት) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. ማያ ከ 500 ፒክስል ወይም መጠቀም በቁመት አቀማመጥ ከሆነ ቅንፎች ውጤት ቅጦች ይወስዳል.

ጥሩ ተስተካክለው ለ ቁልፍ ቃል አይደለም

not. የሚዲያ መጠይቅ, እናንተ ቃል አይደለም ማስገባት ይችላሉ. እንደሚከተለው ይህ እንዳደረገ ነው:

@media (ሳይሆን ከፍተኛ-ስፋት: 700px ) {}

ከፍተኛው ወርድ 700 ፒክስል እኩል አይደለም ከሆነ ንብረቶች ገቢር ናቸው.

የሚዲያ ባህሪያት

የ መጠይቆች በርካታ የቅድመ-የተቋቋመ ተግባራት ጥቅም ላይ ሊውል ይችላል. W3C. ሁሉም መስመር ላይ W3C ይችላሉ ጋር ያንብቧቸው. በቂ አብዛኞቹ coders ሦስቱ ዋና ዋና ባለቤት ዘንድ:

• (о нем мы уже говорили); አቀማመጥ (ቀደም ሲል ስለ ተነጋገረ);
• (ширина, ее тоже упоминали); ስፋት (ስፋት, ይህ ደግሞ የተጠቀሰው ነው);
• (высота). ቁመት (ቁመት).

ቁመት እምብዛም ጥቅም ላይ ውሏል, ነገር ግን ይህ ቅንብር ጠቃሚ ሊሆን ይችላል ውስጥ ጥቂት አጋጣሚዎች አሉ.

እንዴት እና የት ጥያቄዎችን ቦታ ነው?

ብዙ የድር ነዳፊዎች በሆነ ፋይል ስታይል መጨረሻ አኖሩአቸው. ለምሳሌ ያህል, የመጀመሪያው ዋና ቅጦች ይዘረዝራል, ከዚያም ወደ ሰነድ ግርጌ ላይ ጥያቄዎች አደረግን.

ይህ በጣም ጥሩ አይደለም. ይበልጥ አመቺ መብት ዋና ቅጦች በኋላ የተለያዩ መሣሪያዎች ንብረቶችን ቦታ. ለምሳሌ ያህል, አንተ ቀይ ቅርጸ ቁምፊ ቀለም ለማዘጋጀት አንድ div: አለን:

div {

ቀለም: ቀይ;

}

ወዲያውኑ ጥያቄውን ይጠቁማል በኋላ:

@media (ደቂቃ-ስፋት: 320) {}

ንብረቶች ይጥሊሌ.

እርስዎ "ንጹሕ» CSS እየተጠቀሙ ከሆነ እንዲህ ዓይነቱ አቀራረብ ላይሆንለት ነበር. ወደ preprocessor እርዳታ ነው. እነርሱ ይበልጥ ትክክለኛ ትግበራ ጥያቄዎች ሳቢ አጋጣሚዎች ብዙ አለን.

ሌላው አማራጭ - የተለያዩ ቅጥ ፋይሎች ውስጥ የተለያዩ መሣሪያዎች ንብረቶችን በማስቀመጥ. እርስዎ ለማስገባት አንድ preprocessor መመሪያ የሚጠቀሙ ከሆነ ይህ በተለይ ጠቃሚ ነው. ውጤቱም ንጹህ ኮድ አርትዕ ለማድረግ አንድ ቀላል ነው.

ይህም አንድ ይጠቀሙ ነው? ሁሉም የግል ምርጫዎችን እና የቡድኑ ባህሪያት ላይ ይወሰናል. ምናልባትም, የ ሥራ ቦታ ላይ ተቀባይነት ያገኛል የሚዲያ መጠይቆችን ስለማስቀመጥ አንድ የተወሰነ መንገድ አለው.

በተጨማሪም የቅርብ ሶፍትዌር ጋር ሕይወትን ለማቅለል እንደሚችል መዘንጋት የለብንም. ይህም ብቻ preprocessor ስለ አይደለም. ትውጣላችሁ ቡድን የሲ ሚዲያ መጠይቆች ጋር ሂደት በጣም ቀላል ማድረግ ይችላሉ. ይህን መሣሪያ ወይም analogs ማንኛውንም ጠንቅቀው ይመከራሉ.