Вось як дадаць адаптыўныя малюнка з дапамогай CSS дызайну
Паглядзіце на папулярных вэб-сайтах сёння і адзін лячэнне дызайн, што вы ўпэўненыя, каб убачыць вялікі, экран остовного фонавыя малюнкі. Адна з праблем , з даданнем гэтых малюнкаў зыходзіць з найлепшай практыкі , што вэб - сайты павінны рэагаваць на розныя памеры экрана і прылады - падыход , вядомы як адаптыўны вэб - дызайн .
Паколькі змены макета вашага сайта і шалі з рознымі памерамі экрана, таму таксама павінны гэтыя фонавыя малюнкі маштабаваць іх памер адпаведна.
На самай справе, гэтыя «вадкія адлюстравання" з'яўляюцца адным з ключавых элементаў, якія рэагуюць сайтаў (разам з сеткай вадкасці і медыя запытаў). Гэтыя тры часткі былі галоўным спагадлівага вэб-дызайну з самага пачатку, але ў той час як гэта заўсёды было даволі лёгка дадаваць адаптыўныя убудаваныя выявы на сайце (убудаваныя выявы графікі, якія закадзіраваны як частка HTML-разметкі), выканаўшы тое ж самае з фонавымі выявамі (якія стылізаванымі ў старонку з дапамогай CSS уласцівасцяў фону) ужо даўно забяспечыў значную праблему для многіх вэб-дызайнераў і інтэрфейсных распрацоўшчыкаў. На шчасце, даданне ўласцівасці «фон-памер» у CSS мае гэта магчымым.
У асобным артыкуле я распавёў , як выкарыстоўваць CSS3 ўласцівасць фон-памер , каб расцягнуць малюнак , каб змясціцца ў акне, але ёсць яшчэ лепш, больш карысны спосаб разгортвання для гэтага ўласцівасці. Для гэтага мы будзем выкарыстоўваць наступнае ўласцівасць і значэнне камбінацыі:
фон-памер: вечка;
Ўласцівасць вечка ключавое слова паказвае браўзэру, каб маштабаваць малюнак па памеры акна, незалежна ад таго, наколькі вялікі або маленькі, што акно атрымлівае. Малюнак маштабуецца , каб пакрыць увесь экран, але першапачатковыя прапорцыі і суадносіны бакоў будуць захаваны, прадухіляючы само малюнак ад скажаюцца.
Малюнак змяшчаецца ў акне, як вялікі, наколькі гэта магчыма, так што ўсё акно паверхню пакрыта. Гэта азначае, што вы не будзеце мець ніякіх белых плям на вашай старонцы або якіх-небудзь скажэнняў на малюнку, але гэта таксама азначае, што некаторыя малюнкі могуць быць абрэзаны ў залежнасці ад суадносін бакоў экрана і выява ў пытанні. Напрыклад, краю малюнка (альбо зверху, знізу, злева ці справа) можа быць абрэзаны на малюнках, у залежнасці ад таго, якіх значэнняў выкарыстоўваць для ўласцівасці фону-пазіцыі. Калі арыентавацца фону на «левым верхнім куце», любое перавышэнне на малюнак адарвецца ніжняй і правай бакоў. Калі цэнтр фонавы малюнак, лішак адарвецца усіх бакоў, але так, што лішак распаўсюджана, уздзеянне на які-небудзь аднаго боку, будзе менш служыць.
Як выкарыстоўваць фон-памер: вечка;
Пры стварэнні фонавага малюнка, гэта добрая ідэя, каб стварыць малюнак, якое досыць вяліка. У той час як браўзэры могуць зрабіць малюнак менш без прыкметнага ўплыву на якасць прайгравання, калі браўзэр маштабуецца малюнак да памеру большага, чым гэта першапачатковыя памеры, візуальнае якасць будзе пагаршацца, становячыся расплывістым і няякасна. Недахопам з'яўляецца тое, што ваша старонка прымае ўдар па прадукцыйнасці, калі вы дастаўку гіганцкіх малюнкаў на ўсіх экранах.
Калі вы зробіце гэта, пераканайцеся , што правільна падрыхтаваць гэтыя выявы для хуткасці загрузкі і вэб - дастаўкі . У рэшце рэшт, вам трэба знайсці залатую сярэдзіну паміж досыць вялікім памерам выявы і якасцю і разумным памерам файла для хуткасці загрузкі.
Адзін з распаўсюджаных спосабаў выкарыстання маштабавання фонавых малюнкаў, калі вы хочаце, каб малюнак заняць ўвесь фон старонкі, няхай гэта будзе шырокая, што старонка і разглядаецца на настольным кампутары або значна менш і накіроўваецца ў партатыўным, мабільны прылады.
Загрузіць малюнак на вэб-хостынгу і дадаць яго ў свой CSS у якасці фонавага малюнка:
Фонавы малюнак: URL (феерверк-над-wdw.jpg);
фон-паўтарыць: не паўтараць;
фон становішча: цэнтр-цэнтр;
фон-ўкладанне: фіксаваны;
Дадайце браўзэр прыстаўкі CSS першым:
-webkit-фон-памер: вечка;
-moz-фон-памер: вечка;
-o-фон-памер: вечка;
Затым дадаць ўласцівасць CSS:
фон-памер: вечка;
Выкарыстанне розных малюнкаў, якія падыходзяць для Розных прылад
У той час як адаптыўны дызайн для настольнага кампутара або наўтбука вопыт вельмі важны, разнастайнасць прылад, якія могуць атрымаць доступ да Web значна вырасла, і большае разнастайнасць памераў экрана прыходзіць з гэтым.
Як згадвалася раней, нагрузка вельмі вялікі які рэагуе фонавы малюнак на прыладзе, напрыклад, не з'яўляецца эфектыўным або прапускной здольнасці свядомых дызайн.
Даведайцеся , як вы можаце выкарыстоўваць запыты сродкаў масавай інфармацыі , каб выкарыстоўваць выявы , якія будуць адпавядаць прылад , якія яны будуць адлюстроўвацца на і далейшага паляпшэння сумяшчальнасці вашага вэб - сайта з дапамогай мабільных прылад.
Арыгінальная артыкул Jennfier Krynin. Пад рэдакцыяй Джэрэмі Girard 9/12/17