CSS மீடியா கேள்விகள்: படி விளக்கம், அம்சங்கள் மற்றும் விமர்சனங்களை மூலம் படி

ஒரு காலத்தில், இணையதளங்களைப் பார்வையிடும் அந்த ஸ்மார்ட்போன்கள் மற்றும் பலர் மட்டுமே சிரிக்கிறார்கள் ஏற்படுத்தும் ஒத்த மொபைல் சாதனங்களும் பயன்படுத்திக்கொள்ள முடிகிறது. பல சாதாரணமாக வசதியாக டெஸ்க்டாப் கணினிகள் இருப்பதால், ஏன் இந்த அவசியம் புரிந்து கொள்ள முடியவில்லை! அல்லது, மோசமான, மடிக்கணினிகள். கூடுதலாக, மொபைல் இணைய பின்னர் விலை உயர்ந்தது.

நேரம் நிறைவேற்றியது. இணைய மலிவான ஆனார். விற்பனை மேலும் மேலும் போன்கள் மற்றும் மாத்திரைகள் வெளியே வந்தது. சில காலத்திற்குப் பிறகு பிரபலமான தளங்கள் உரிமையாளர்கள் அவரது தலையில் அரிப்பு புதிராகவும் இருந்தது. புள்ளி விவரப்படி, அது அவர்களின் வளங்களை ஒரு நிலையான PC உடன் விட அவர்களின் ஸ்மார்ட்போன்கள் வருகை வாய்ப்புகள் அதிகம் உள்ளன என்று தோன்றினார்!

அந்த நேரத்தில் தளங்கள் மொபைல் சாதனங்கள் பார்ப்பதற்காக உகந்ததாக இல்லை. உங்கள் தொலைபேசியில் பழைய வாழ்க்கை கோயிங் டு, நீங்கள் சிறிய கடிதங்கள், சிறிய மெனு பொருட்களை மற்றும் சங்கடமான பொத்தான்கள் உள்ளடக்கத்தை இருக்க வேண்டும்.

CSS மீடியா குவெரிகளின் வருகையுடன்

எந்த திரையில் இருந்து பார்த்தபோது அவர்கள் நன்றாக இருக்கும் என்று வளங்களை சுமத்தும் அவசியமானதாக இருந்தது. முதல் ஒவ்வொரு அளவு தனி தளங்கள் நிறுவுவதில் நடைமுறையில் பரவியது. உதாரணமாக, ஒரு மொபைல் போன் பயன்படுத்த யார் பார்வையாளர்கள், நீங்கள் ஒரு வளத், உங்கள் கணினியில் "உட்கார்ந்து" என்று ஒரு பெற - மற்ற மீது. ஆனால் அது ஒரு நீண்ட செலவு மற்றும் சிரமமாக இருந்தது.

பின்னர் CSS3 மீடியா கேள்விகள் வந்தது. அவர்களுடன் மாறும் வடிவமைப்பு செயல்படுத்த வெறும் சாத்தியம் வந்தது.

மாறும் வடிவமைப்பு என்ன?

வள தோற்றத்தை அது உலாவும் எந்த திரை அளவு ஆகியவற்றைப் பொறுத்து மாறுபடும் இந்த கால பயன்படுத்தப்படுகிறது. இந்த எப்படி புரிந்துகொள்வது? இது மிகவும் எளிது.

உங்களிடம் இணையதளம் என்று கற்பனை செய்து பாருங்கள். அதன் மேல் பகுதியில் ஒரு ஊடுருவல் மெனு உள்ளது. கிடைமட்ட. அது பக்கத்தின் முழு அகலம் விரிந்துள்ளது. என்று கீழே தொடர்புத் தகவலுடன் ஒரு சாதனமாகவும் இருக்கிறது. தொலைபேசி மற்றும் முகவரியும் இரண்டு தொகுதிகள் இடைவெளி மற்றும் ஒருவருக்கொருவர் அடுத்தடுத்த கிடைமட்டமாக அமைக்கப்பட்டுள்ளன. இந்த தொகுதி கீழ் - முக்கிய உள்ளடக்கம், மற்றும் இடது அல்லது வலது பக்கப்பட்டியில் உள்ளது. கீழே, வழக்கமான, அடிக்குறிப்பு போன்ற.

இந்த "மரபார்ந்த" அமைப்பை வரைபடம். அது ஒரு தனிப்பட்ட கணினி சரியான, ஆனால் மொபைல் போன்களில் கூட வசதியான அல்ல. கிடைமட்ட மெனு கூட பெரும்பாலும் குறிக்கிறது. தொடர்புகள் ஒன்றை விட்டு மிக தொலைவில் அமைந்துள்ளது. பக்கப்பட்டியில் பெற்ற தகவலின் மற்றும் அனைத்து திரையில் உருட்டும் வேண்டும், மற்றும் அது ஒவ்வொருவரின் ரசனைக்கேற்ப இல்லை.

பிரச்சனை CSS3 மீடியா கேள்விகள் ஒரு தகவமைப்பு மற்றும் மொபைல் வடிவமைப்பு பயன்படுத்தி மூலம் இதற்குத் தீர்வு காணலாம். ஊடக கேள்விகளுக்கு பயன்படுத்துவதன் மூலம், உள்ளடக்கத்தை இடம் வரையறுத்துள்ளனர் ... இப்போது இது போன்ற வேலை:

• மேல் - செங்குத்து ஊடுருவல் மெனுவை அலகு;
• அது கீழ் - இது இப்போது செங்குத்தாக வைக்கப்படுகின்றன தொடர்புகள், உடன் தொகுதி;
• பக்கப்பட்டியில் உள்ளடக்கத்தை <முக்கிய> குறிச்சொல் உள்ளடக்கம் பக்கத்தில் காண்பிக்கப்படவில்லை, அது மேலே.

இந்த பொறுப்பு வலை வடிவமைப்பு மீடியா கேள்விகள் செய்ய முடியும் என்ன ஒரு எளிய உதாரணம் ஆகும். உண்மையில் நிறைய சாத்தியக்கூறுகள்.

எனவே என்ன ஊடக கேள்விகளுக்கு என்ன?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. CSS ஐ கீழ் ஊடகம் கேள்விகள் CSS3 நீங்கள் பக்கத்தின் உள்ளடக்கத்தை சில நிபந்தனைகளுக்கு ஏற்ப செய்ய முடியும் கால தொகுதி புரிந்து. உதாரணமாக, திரை அளவு, அல்லது நோக்குநிலை சாதனம் (உருவப்படம் / இயற்கை) பதிலளிக்க தொடங்குகிறது.

அமைப்பு உள்ளடக்கத்தை மாற்ற வேண்டிய அவசியம் என்பதை விளங்கிக்? இது ஊடகங்கள் கேள்விகளுக்கு பயன்படுத்துகிறது. அவர்கள் குறிப்பிட்ட அளவுருக்கள் குறிப்பிடவும். அதில் இருந்து ஒரு பார்வையாளர் தளத்தில் வந்து ஒரு சாதனம் முன் மருந்து பாணியை உட்பட இந்த அளவுருக்கள் சந்திக்கிறார் என்றால். அவர்கள் மொத்தம் CSS ஐ அட்டவணையாக எழுத முடியும், அல்லது ஒரு தனி file.

CSS மீடியா கேள்விகள் உலாவி இணக்கம்

Safari до Chrome. அனைத்து நவீன உலாவிகளில் சபாரி இருந்து Chrome, இந்த தொழில்நுட்பத்தை ஆதரிக்கின்றன. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. நிச்சயமாக, இன்டர்நெட் எக்ஸ்ப்ளோரர் பழைய பதிப்புகள் பயனர்கள் ஒரு பிரச்சனை ... ஆனால் நேர்மையாக அதை எதிர்கொள்ள நாம் - இன்னும், தான் எதுவும் பழைய IE பயன்படுத்தி யார் பிரச்சினைகள் ஏற்படுத்தும் அந்த.

தொடரியல் தகவமைப்பு அமைப்பை ஊடகம் கேள்விகள்

html. ஒருவேளை நீங்கள் html ஆக பாணி கோப்பு இணைக்கப்படும் போது ஊடக கேள்விகளுக்கு அம்பலமாகியுள்ளன. அந்த வரி நினைவில்? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. <இணைப்பை ரெல் = 'நடைதாளுடன்' வகை = 'உரை / CSS' படம் =: http: // தளத்தில் /article/320575/%E2%80%99style.css%E2%80%99%3E சில நேரங்களில் இறுதியில் மற்றொரு அளவுரு சேர்க்கிறது, போன்ற தோற்றத்தைக் கொண்ட: ஊடக = 'திரை'.

இந்த ஒரு ஊடக கேள்வி! அவர் குறிப்பிட்ட பாணி கோப்பு தொலைக்காட்சிகள் பெற்றிருக்கும் சாதனங்களில் வேலை செய்யும் என்று குறிக்கிறது. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. மாறாக, நீங்கள் திரை அச்சு குறிப்பிட முடியும் - இந்த வழக்கில், கோப்பு பாணிகளையும் பக்கத்தை அச்சிட என்றால், பயன்படுத்தப்படுகிறது.

நீங்கள் பின்வரும் பண்புகளை பயன்படுத்தலாம்:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; அனைத்து - உலகளாவிய பதிப்பு, அமைதி பயன்படுத்தப்படும் அனைத்து கணக்குகளிலும் பயன்படுத்தப்படுகிறது;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - திரைகளில் (கணினிகள், மடிக்கணினிகள், மாத்திரைகள், ஸ்மார்ட்போன்கள், அந்த ஒரு காட்சி பெற்றிருக்கும் அனைத்து உள்ளது);
• принтеры; அச்சு - பிரிண்டர்ஸ்;
• – проекторы; திட்ட - வெளியீடு;
• – речевые браузеры; பேச்சு - பேச்சு உலாவிகளில்;
• – для устройств для слабовидящих; பிரெய்ல் - பார்வையிழந்தவர்களுக்கு சாதனங்கள்;
• – для экранов телевизоров. தொலைக்காட்சி - டிவி திரையில் உள்ளது.

அனைத்து இல்லை. , но они используются редко. பல கூடுதல் CSS மீடியா கேள்விகள் பண்புகளை உள்ளன, ஆனால் அவர்கள் அரிதாக பயன்படுத்தப்படுகின்றன. all. கூடுதலாக, நீங்கள் ஒரு அளவுரு குறிப்பிட வேண்டாம் - அனைத்து Default.

ஊடக கேள்விகளுக்கு அமைப்பு

css. அதற்கு பதிலாக ஒரு பாணி கோப்பு உருவாக்குவதற்குப் பதில், நீங்கள் CSS குறியீடு பயன்படுத்த முடியும். அது, இந்த மாதிரி:

(тут будут стили } ஊடகத்தை திரை மற்றும் (அதிகபட்சம் அகலமும்: 1024px) {( உள்ளன பாணியை}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. மற்றும் கூடுதல் அளவுருக்களை - ஊடக கேள்வி பயன்படுத்தப்படுகிறது அது தெளிவான என்று எதில் ஊடகத்தை உத்தரவு பின்னர், சாதனம் (திரை திரை) வகை ஒரு அறிகுறியும் இல்லை. Max Width. இந்த உதாரணத்தில், CSS மீடியா கேள்விகள் மேக்ஸ் அகலம் சொத்து பயன்படுத்த. px. இந்த ப்ரேஸ் பட்டியலில் பாணியை ஈடுபட்டு கொள்ளும், என்றால் 1024 px விட சாதனம் திரை அளவு பயனர். и and не обязательны. திரை மற்றும் பிணைப்பு இல்லை. இந்த எழுத முடியும்:

ஊடகத்தை (அதிகபட்சம் அகல: 1024px) {}

அத்தகைய நிலைமைகளில், பண்புகள் எந்த சாதனத்தில் பயன்படுத்த வேண்டும், வெறும் தொலைக்காட்சிகள் பெற்றிருக்கும் அந்த.

பல காரணிகள் குறிப்பிடாமல்

நீங்கள் பாணி தேர்வு பயன்படுத்தப்படும் என பல சாதனங்களை வரம்பில் குறைக்க வேண்டும் என்று நினைக்கிறேன். px, но не больше 500 px. நீங்கள் ஒரு ஸ்மார்ட்போன் இருந்து உங்கள் தளத்திற்கு வருகை யார் மட்டுமே அந்த குணங்களைக் காட்டத் விரும்புகிறேன் என கூறுங்கள், திரை அளவு 320 குறைவாக படப்புள்ளிகளுக்குள், ஆனால் எந்த 500 க்கும் மேற்பட்ட படப்புள்ளிகளுக்குள் அல்ல. அத்தகைய நிலைமைகளில், கோரிக்கை வடிவம் கொள்கிறது:

ஊடகத்தை (நிமி அகலமும்: 320px) மற்றும் (அதிகபட்சம் அகலமும்: 500px) {}

and. நீங்கள் நிரலாக்க தெரிந்திருந்தால் இருந்தால், நீங்கள் ஆபரேட்டர் விண்ணப்பித்து என்ன தெரியும் NJ. தெரியாது யார் அந்த: இருவகையான சூழ்நிலைகளிலும் உண்மை என்றால் அது சரிபார்க்கிறது. கேள்வி திரையில் ஈ செயல்படுத்தல் பண்புகள் 320 விட குறைவாக அல்ல 500 க்கும் மேற்பட்ட பிக்சல்களாவது இருக்க வேண்டும்.

and не ограничивается одним. மற்றும் இயக்குபவர்கள் முதலிடத்தைப் மட்டுமே அல்ல. நீங்கள் எவ்வளவு வேண்டுமானாலும் வைக்கவும் முடியும். டிவிகளுக்கான - உதாரணமாக, ஸ்மார்ட்போன்கள் மற்றும் மிகவும் வேறுபட்ட ஒரு குறிப்பிட்ட அளவு திரைகளில் உருவாக்க முயற்சி.

ஒரு முக்கியமான புள்ளி - பயனர் சாதனத்தின் நோக்குநிலை. நிலத்தோடு - உருவப்படம் நோக்குநிலை உங்கள் ஸ்மார்ட்போன், யாராவது மீது வலைத்தளங்கள் உலாவல் யாரோ. orientation:portrait, для вторых, соответственно, orientation:landscape. இரண்டாவது, முறையே, நோக்குநிலை, உருவப்படம்: முன்னாள், நீங்கள் ஒரு கூடுதல் நிலையில் நோக்குநிலை வேண்டும் இயற்கை. @media. இந்த வரிகளை மேலும் கூறினார் ஊடகத்தை அணி பின்வரும் அடைப்புக்குறிக்குள் காட்டப்படுகின்றன. and. நீங்கள் வழியாக பகிரலாம், அதை முடியும்.

மற்றொரு சுவாரசியமான நுட்பத்தையும். and вы вполне можете использовать оператор or. அதற்குப் பதிலாக, நீங்கள் நன்கு அல்லது ஆபரேட்டர் பயன்படுத்தலாம். தான் உண்மையென்று கோரிக்கை குறைந்தது ஒரு நிபந்தனை தேவை! உதாரணமாக:

) {} ஊடகத்தை (அதிகபட்சம் அகலமும்: 500px) அல்லது (நாட்டம்: உருவப்படம்) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. திரை 500 க்கும் குறைவான படப்புள்ளிகளுக்குள் அல்லது பயன்பாடு உருவப்படம் நோக்குநிலை இருந்தால், ப்ரேஸ் விளைவு பாணியை எடுக்கும்.

நன்றாக-சரிப்படுத்தும் இல்லை முக்கிய

not. ஊடக கேள்வி, நீங்கள் வார்த்தை நுழைக்க முடியாது. பின்வருமாறு இந்த செய்யப்படுகிறது:

ஊடகத்தை (இல்லை அதிகபட்சம் அகலமும்: 700px ) {}

அதிகபட்ச அகலம் 700 பிக்சல்கள் சமமாக இல்லை என்றால் பண்புகள் செயல்படுத்தப்படுகின்றன.

ஊடக அம்சங்கள்

கேள்விகளுக்கு பல முன் நிறுவப்பட்ட செயல்பாடுகளை பயன்படுத்த முடியும். W3C. அனைத்து நீங்கள் ஆன்லைனில் W3C, முடியும் அதில். போதுமான மிக கோடர்களுக்கு மூன்று முக்கிய சொந்தமாக:

• (о нем мы уже говорили); திசை (நாம் ஏற்கனவே அது பற்றி பேசினார்);
• (ширина, ее тоже упоминали); அகலம் (அகலம், இது குறிப்பிடப்பட்டுள்ளது);
• (высота). உயரம் (உயரம்).

உயரம் அரிதாகவே பயன்படுத்தப்படுகிறது, ஆனால் இதில் இந்த அமைப்பை பயனுள்ளதாக இருக்கும் ஒரு சில சந்தர்ப்பங்களில் உள்ளன.

எப்படி எங்கே கோரிக்கைகளை வைக்க?

பல வலை வடிவமைப்பாளர்கள் எப்படியோ கோப்பு பாணிகள் முடிவுக்கு வைக்கவும். உதாரணமாக, முதல் முக்கிய பாணியை பட்டியலிடுகிறது, பின்னர், ஆவணம் கீழே உள்ள, கோரிக்கைகளை வைக்கப்படும்.

இது மிகவும் நல்லதல்ல. மிகவும் வசதியான வலது முக்கிய பாணியை பிறகு வெவ்வேறு சாதனங்களுக்கு பண்புகள் வைக்க. உதாரணமாக, நீங்கள் சிவப்பு வண்ணத்தை அமைக்க ஒரு கிராம, வேண்டும்:

கிராம {

நிறம்: சிவப்பு;

}

உடனேயே கோரிக்கை குறிக்கிறது:

ஊடகத்தை (நிமி அகலமும்: 320px) {}

பண்புகள் பரிந்துரைக்கிறார்.

நீங்கள் "தூய» CSS பயன்படுத்தி, அத்தகைய ஒரு அணுகுமுறை சிக்கலான இருக்கும். என்பதன் உதவி செய்க. அவர்கள் இன்னும் துல்லியமான பயன்பாட்டை கோரிக்கைகளுக்காக சுவாரஸ்யமான வாய்ப்புகளை நிறைய வேண்டும்.

மற்றொரு விருப்பத்தை - பல்வேறு பாணி கோப்புகளை வெவ்வேறு சாதனங்களைப் கிடைக்கும் சொத்துக்களை வைப்பது. இறக்குமதி செய்ய என்பதன் உத்தரவு பயன்படுத்தினால் இது குறிப்பாக பயனுள்ளதாக இருக்கும். விளைவாக, திருத்த எளிதான சுத்தமான குறியீடு ஆகும்.

எந்த ஒரு பயன்படுத்துவது? இது அனைத்து தனிப்பட்ட முன்னுரிமைகள் மற்றும் அணியின் பண்புகள் பொறுத்தது. ஒருவேளை, உங்கள் வேலை இடத்தில் ஊடக கேள்விகளுக்கு வைப்பது ஏற்றுக்கொள்ளப்படும் ஒரு குறிப்பிட்ட வழியில் உள்ளது.

நீங்கள் சமீபத்திய மென்பொருள் உங்கள் வாழ்க்கை எளிமைப்படுத்த முடியும் என்று மறக்க வேண்டாம். அது வெறும் என்பதன் பற்றி அல்ல. சுவாரசியமாக குழு CSS மீடியா கேள்விகள் உடன் செயல்முறை மிகவும் எளிதாக செய்ய முடியும். இந்த கருவி அல்லது அதனுடைய ஒப்புமைகளுக்கு எந்த மாஸ்டர் பரிந்துரைக்கப்படுகிறது.