Мазмұны
- 01. Медиа-сұрауларды қосу
- 02. Медиа-сауалдың анатомиясы
- 03. Тағы бір нәрсе ...
- 04. Үзіліс нүктелерін таңдау
- 05. Біздің нобайларды реттеу
- 06. Тек ені емес
- Қажетті білім: CSS және HTML аралық
- Қажет: Мәтіндік редактор, заманауи браузер, графикалық бағдарламалық жасақтама
- Жоба уақыты: 1 сағат (барлығы 5 сағат)
- Қолдау файлы
CSS спецификациясының салыстырмалы түрде жаңа бөлігі, медиа сұраулар, сөзсіз, жауап беретін веб-дизайнның ең қызықты аспектісі және әрі қарай эксперимент жасауға дайын аймақ.
Бейімделетін макеттердің қажеттілігін мойындай отырып, кейбіреулер бұқаралық ақпарат құралдарындағы сұраныстарды ені бар тіркелген ені бар сайттарға бейімделетін макеттерді жаңарту құралы ретінде қарастырды. Жауапты макеттерді қабылдағандардың көпшілігі жұмыс үстелінің тұрғысынан, көрініс тарылған кезде мазмұны мен ерекшеліктерін жасырды.
Осы оқулық барысында біз баламалы, бірінші кезекте мобильді тәсілді қолдандық. Енді медиа сұраныстарды енгізуді ойластырып, біз ойлана аламыз қосу экрандағы жылжымайтын мүліктің артуы сияқты ерекшеліктер, біздің сайттың негізін қалаған дизайн мен дизайн құрметті бастапқы деңгейге ие болатынын біле отырып.
Бүгін біз өзіміздің портфолионың шегінен шығып, веб-сайтыңызға қажетті жеке парақтарды құрамыз. Осылайша, біз медиа-сұраныстардың қалай жасалатынын және оларды шынайы жауап ретінде жүзеге асыратындығын көреміз.
01. Медиа-сұрауларды қосу
Біздің үлгі портфолиосындағы компоненттер аяқталғаннан және кез-келген макеттің шеңберінен тыс жұмыс істейтін болғандықтан, оларды біздің сайтты құрайтын әр түрлі парақтарға ауыстыратын уақыт келді.
Біз өзіміздің басты парағымыздан бастаймыз. Жұмыс үстеліне бағытталған дизайннан біз кең көріністерде біздің орналасуымыз келесідей көрінуі керек екенін көреміз:
Біздің дизайнымыздан өлшемдер алып, CSS-те құжат аймағын келесідей сипаттай аламыз:
.document {
төсеме: 0 5%;
}
.негізгі {
ені: 74.242424242424%; / * 784/1056 * /
қалқымалы: сол жақта;
}
.қосымша {
ені: 22.727272727273%; / * 240/1056 * /
өзгермелі: оң;
}
Осы оқулықтың екінші бөлімінен білгеніміздей, осы бағандардың пайыздық енін есептеу үшін келесі формуланы қолданамыз:
(мақсат / контекст) * 100 = нәтиже
Браузердің өлшемін өзгерткенде, жұмыс үстелінің орналасуы ең кіші экраннан ең үлкеніне дейін масштабталатындығын көреміз. Әрине, кішігірім өлшемдерде бағандар өте тар және ұзындықтар өте қысқа, сондықтан мазмұнды оқу қиын болады. Біз бұл макетті жұмыс істеуге жеткілікті орын болған кезде ғана қалаймыз.
Дәл осы жерде медиа-сұраулар келеді. Бұл формат браузер 768px-тен кең болған кезде ғана күшіне енеді деп есептесек, келесі CSS-ті қосуға болады:
.document {
төсеме: 0 5%;
}
@media экраны және (минималды ені: 768px) {
.негізгі {
ені: 74.242424242424%; / * 784/1056 * /
қалқымалы: сол жақта;
}
.қосымша {
ені: 22.727272727273%; / * 240/1056 * /
өзгермелі: оң;
}
}
Енді қарау алаңы 768 пиксельден тар болған кезде, медиа сұраныстың ішіндегі барлық заттар еленбейді. Бұны медиа-сұрауларды қолдамайтын кез-келген шолушы елемейді.
02. Медиа-сауалдың анатомиясы
Мұнда не болып жатқанын түсіну үшін медиа сұраныстың қалай жасалатынын қарастырайық. Біз оны екі бөлікке бөлуге болады:
- @media экраны: Медиа-сауалдың бірінші бөлігі - медиа түрі. Егер сіз CSS-ге басып шығару мәнерлерін қосқан болсаңыз, сіз бұл синтаксисті біле аласыз. Сондай-ақ, түр атауын бұқаралық ақпарат құралдары төлсипаты сілтеме> элемент. Себебі екеуі де CSS 2.1 спецификациясында табылған медиа типтерінің бекітілген жиынтығын қабылдайды.
- (минималды ен: 768px): Екінші бөлім сұрау. Бұған ерекшелігі сұрау керек (бұл жағдайда қарау терезесінің минималды ені) және сәйкесінше мәні тестілеу үшін (768px).
Жауапты веб-дизайн туралы айтатын болсақ, енге назар аудару үрдісі бар, бірақ біз басқа мүмкіндіктерді де тексере аламыз:
- (мин- | max-) ені және (мин- | макс-) биіктігі: Бұл көрініс терезесінің ені мен биіктігін сұрауға мүмкіндік береді (яғни шолғыш терезесі).
- (мин- | макс-) құрылғының ені және (мин- | макс-) құрылғының биіктігі: Бұлар бүкіл дисплейдің енін сұрауға мүмкіндік береді. Менің тәжірибем бойынша, макеттерді дисплейге емес, көрініс алаңына негіздеу ақылға қонымды.
- бағдар: Мұнда мүмкіндіктер туралы бірден ойлауға болады; телефонның бағытына негізделген әртүрлі мазмұнды көрсететін қосымшалар туралы ойлаңыз - Интернетте де солай болуы мүмкін.
- (min- | max-) арақатынасы: Бұл браузер терезесінің арақатынасы негізінде макеттерді бейімдеуге мүмкіндік береді ...
- (min- | max-) құрылғының арақатынасы: ... және бұл бізге құрылғының арақатынасы негізінде осылай жасауға мүмкіндік береді. Оуэн Григорий өткен жылы керемет мақала жазды, онда біз осы сұранысты дизайнды пайда болатын құрылғыларға байланыстыру үшін қалай қолдануға болатындығын білдік.
- (мин- | макс-) монохромды: Сондай-ақ, құрылғыда монохромды дисплей бар-жоғын тексере аламыз. Егер Amazon компаниясының электронды сия Kindle құрылғылары өтірік айтпаса және олардың экрандары түрлі түсті болып есептелсе, бұл қаншалықты пайдалы болатынын елестетіп көріңіз!
Сұрауымыздың соңғы бөлігі ең пайдалы болуы мүмкін. Пайдалану арқылы және, біз бір сұрауда бірнеше функцияларды тексере аламыз. Мысалға:
@media экраны және (минималды ені: 768px) және (бағдар: ландшафт) {
...
}
Көріп отырғаныңыздай, бұқаралық ақпарат құралдарындағы сауалдар бізге жеткілікті тәжірибе жинауға көмектеседі - мен тек бетіне қол тигіздім. Егер сіз ұйықтар алдында жеңіл оқығыңыз келсе, сіз тексеруге болатын барлық мүмкіндіктерді сипаттайтын W3C медиа-сұранысының сипаттамасын оқудан гөрі жаманырақ болар едіңіз.
03. Тағы бір нәрсе ...
Біз CSS-ке медиа-сұраныстарды қосқанымызға қарамастан, егер біз сайтымызды мобильді құрылғыдан қарасақ, біздің сайт әлі де дисплей 768px-тен кеңірек болып көрінетінін байқайсыз.
Неліктен бұлай болып жатқанын түсіну үшін біз қысқаша тарих сабағын өтуіміз керек.
2007 жылы iPhone-ның түпнұсқасы жарияланған кезде, оның үлкен сатылым нүктелерінің бірі «нақты вебті» шолу мүмкіндігі болды, тіпті егер бұл кеңейтілген жұмыс үстеліне бағытталған сайттарды білдірсе де, оларды кішкентай экранға сыйғызу керек. IPhone мұны өзінің веб-парақтарын 320 пиксельдік экранға сыйғызу үшін кішірейту алдында дисплейдің ені 980px болатындығы туралы хабарлау арқылы істей алды.
Бірақ iPhone жауап беретін дизайн пайда болғанға дейін ұсынылды. Қазір авторлар ұялы телефонға арналған сайттарды жобалап жатқандықтан, бұл функция онша пайдалы емес. Бақытымызға орай, Apple бұл мінез-құлықты айналып өту құралын қосты және оны басқа өндірушілер қабылдағаннан бері, ол іс жүзінде стандартты. Бұл жай ғана біреуін қосуды қамтиды мета біздің белгілеу элементі:
мета аты = «viewport» мазмұны = «бастапқы масштаб = 1,0, ені = құрылғының ені» />
Бұл веб-сайтты кішірейтуге болмайтынын және шолғыш терезесінің енін жалпы құрылғының енімен бірдей қарастыру керек екенін хабарлауға арналған шолушыларға айтады. Осы жолды қосқаннан кейін, біздің веб-сайтыңыз жоспарланған орналасуымен пайда болады:
04. Үзіліс нүктелерін таңдау
Біздің медиа сұрауымызға оралайық:
@media экраны және (ені минимум: 768px) {
...
}
Орналасу бейімделетін мәндер әдетте үзіліс нүктелері деп аталады. Естеріңізде болса, екінші бөлігінде пикселдерді қолдану жауапсыз ойлаудың көрсеткіші деп айтқан болатынмын, бірақ мен 768 пиксельді таңдап алдым, өйткені бұл таныс құрылғының ені болуы мүмкін.
Танымал құрылғылардың сипаттамаларына негізделген үзіліс нүктелерін таңдаудың орнына, біздің мазмұнымыздан алынған мәндерге, мысалы, оқуға ыңғайлы сызық ұзындықтарына немесе кескіннің максималды өлшемдеріне назар аудару тиімді болады.
Біздің типтің өлшемі ems-ті қолдана отырып, біздің медиа-сауалдарымыз үшін эмстерді де қолдану орынды сияқты. Іс жүзінде мұның қосымша пайдасы бар. Пайдаланушы браузердегі мәтіннің өлшемін өзгерткен кезде, парақтар кішігірім үзіліс нүктелерін қолдануға бейімделеді. Біздің веб-сайт тек қарау терезесінің өлшеміне ғана емес, қаріптің өлшеміне де бейімделеді. Шындығында, Джереми Киттің БАҚ-қа негізделген сауалдарын көрсеткенін көргенде ғана мен олардың қаншалықты қуатты болатынын түсіндім.
Біздің дизайнымыз мүмкін сыну нүктелерінің кейбір белгілерін бере алатын болса да, көбінесе оларды таңдаудың ең жақсы әдісі эксперимент болып табылады. Браузер терезесінің енін реттей отырып, мен 800px - бұл кеңірек орналасуға ауысудың жақсы ені деп шештім.
Біз 800px-ті қалай білдіреміз? Тағы да, біз формуламызды қолдана аламыз, бірақ контекст қандай? Медиа сұраныстарға арналған ems есептеу кезінде мәтінмән әрқашан шолушының әдепкі қаріп өлшемі болып табылады сіздің CSS-де бұл мән қайта анықталғанына қарамастан. Әдетте бұл 16px стандартты болып табылады, бұл бізге:
800 / 16 = 50
Енді біз медиа сұранысты келесідей жаңарта аламыз:
@media экраны және (ені минимум: 50em) {/ * 800px * /
...
}
05. Біздің нобайларды реттеу
Естеріңізде болса, 2-бөлімде біз нобайларға жауап беруге бейімделдік. Осы нобайлардағы кескіндер ені толық болғаннан кейін, әр кескіннің оң жағында бос орын пайда болады. Тағы да, бұқаралық ақпарат құралдарындағы сұраулар мұны түзетуге мүмкіндік береді.
Міне, біздің түпнұсқа CSS:
ol.media li.media-элемент {
өң-түс: #fff;
маржа: 0 4.16666666667% 4.16666666667% 0;
ені: 47.91666666667%;
қалқымалы: сол жақта;
}
ol.media li.media-тармақ: n-бала (2n) {
оң жақ шеті: 0;
}
Бұл бос кеңістіктің пайда болу нүктесі - шолғыш 560 пиксельден кеңейген кездегідей.Біз бұл мәнді бір қатарға үш нобайды көрсетуге ауыстыру үшін таңдаймыз. Мұны келесі CSS қосу арқылы жасай аламыз:
@media экраны және (ені минимум: 35em) {
.media-item {
ені: 30.612244897959%; / * 240/784 * /
маржа: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-бала (3n) {
оң жақ шеті: 0;
}
}
Бұл медиа сұраныстың ішіндегі нобайға қажетті барлық стильдерді қайта жазудың қажеті жоқ, тек бейімделгіміз келетін бөліктерді ғана жазыңыз.
Бұл өзгерісті шолғыштан көріп отырып, әрбір екінші нобайдың оң жағында шекара жоқ екеніне назар аударасыз. Себебі келесі CSS ережесі әлі де белсенді болып қалады:
ol.media li.media-тармақ: n-бала (2n) {
оң жақ шеті: 0;
}
Осы мәнді қалпына келтіру үшін бізге CSS-ті медиа-сұрауымызда өзгерту керек:
@media экраны және (ені минимум: 35em) {
.media-item {
ені: 30.612244897959%; / * 240/784 * /
маржа: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
оң жақ шеті: 4.081632653061%;
}
.media-item: n-бала (3n) {
оң жақ шеті: 0;
}
}
Медиа-сұрауларды құрған кезде, мұрагерлік мәселелерін үнемі біліп отырыңыз.
06. Тек ені емес
Медиа сұраулар туралы тек ені бойынша ғана емес, басқа айнымалылар туралы да ойланған жөн. Мысалы, қарау терезесінің биіктігі азайған кезде біздің медиа-парағымыздағы бейне ішінара жасырылады. Бізде технология:
.media-object-wrapper {
астыңғы жағы: 56,25%;
ені: 100%;
биіктігі: 0;
позиция: салыстырмалы;
}
@media экраны және (максималды биіктігі: 35em) және (бағдар: пейзаж) {/ * 560px * /
.media-object-wrapper {
ені: 60%;
астыңғы жағы: 33,75%;
}
}
Мен осы мінез-құлықты әрі қарай жетілдіру үшін бағдарлау сұрауын енгіздім.
Біз дизайнның басқа бөліктеріне ұқсас әдісті қолдана аламыз, тақырыптың үлкен нұсқасын ауыстырамыз және орын пайда болғаннан кейін парақтың жоғарғы жағына жылжу сілтемелерін жылжыта аламыз.
- Біздің жауап беретін басты парағымызды қараңыз
- Біздің медиа-материалға жауап беретін бетімізді қараңыз
Міне, бізде бар! Біз жауап беретін веб-сайт құрдық - және бос уақытымыз бар! Жақсы емес. Икемді макеттер, кескіндер мен медиа-сұраулар тек жауап беруді жобалау процесінің бастамасы болып табылады.
Ертең: Осы оқулықтың соңғы бөлімінде біз жауап беретін веб-дизайн шеңберінен шығып, шынымен жауап беретін веб-сайттарды қалай құруға болатындығын қарастырамыз.
Пол - Англияның Брайтон қаласында орналасқан интерактивті дизайнер. Ол интернетте қарапайым, бірақ тартымды интерфейстерді жасау кезінде ең бақытты.
