Тази статия демонстрира стъпките за създаване на адаптивен дизайн на уебсайт в HTML и CSS с помощта на:
Как да създадете адаптивен дизайн на уебсайт с HTML и CSS?
Създаването на адаптивен дизайн на уебсайт с HTML и CSS включва изграждане на оформление, което се адаптира към различни размери и разделителни способности на екрана. Ето стъпките, които можете да следвате, за да създадете адаптивен дизайн на уебсайт:
Стъпка 1: Мета таг на Viewport
„ прозорец за изглед ” мета таг играе жизненоважна роля в създаването на адаптивен уеб дизайн. Вмъква се вътре в „ <глава> ” на HTML файла, съдържащ следните атрибути:
< мета име = 'viewport' съдържание = 'width=device-width,initial-scale=1' / >
Горният мета таг има два атрибута:
- „ име ” Атрибутът казва името на функционалността, за която е създаден/използван този етикет. Например настройването на „ прозорец за изглед ' към ' име ” за работа с прозореца за изглед на различни устройства.
- „ съдържание ” дефинира предишната стойност на атрибута. Той задава ширината на всяко устройство и мащабира документа/уеб страницата до 100%.
Стъпка 2: Отзивчиви изображения
Поради това, тъй като размерът на изображението варира един от друг, е трудно да се зададе същият “ височина ' или ' ширина ” свойство за всяко изображение. Когато размерът на изображението е фиксиран, потребителите не преоразмеряват изображението на уеб страницата с екрана. Потребителите обаче могат да зададат отзивчивото изображение чрез следния код:
img {
макс- ширина : 100 %;
}
„ максимална ширина ” CSS свойството ограничава изображението да се показва в разпределеното му пространство. Като зададете стойността в „%“, изображението се преоразмерява заедно с преоразмеряването на неговия родителски елемент. Това създава отзивчив ефект за изображението.
Стъпка 3: Оформление на Flexbox
Flexbox оформлението е силно препоръчително за създаване на адаптивен дизайн на уебсайт. Позволява на HTML елементите да се показват на определена позиция и да преоразмеряват наличното пространство за всяко дете според размера, наличен от родителския div. Оформлението Flexbox съдържа няколко свойства, които предоставят много свобода на програмиста, като например в кода по-долу:
< стил >
.родител {
дисплей: гъвкав;
}
.дете {
гъвкав: 1 ;
текст- подравнете : център;
}
< / стил >
< тяло >
< див клас = 'родител' >
< див клас = 'дете' стил = 'граница: 3px плътно синьовиолетово;' >Добре дошли< / див >
< див клас = 'дете' стил = 'граница: 3px плътно тъмнозелено;' >до< / див >
< див клас = 'дете' стил = 'граница: 3px плътно червено;' >Linuxint< / див >
< / див >
< / тяло >
В горния кодов фрагмент:
- Първо създайте родителски елемент div с id на „ родител ' вътре в ' <тяло> ” таг.
- След това създайте множество дъщерни елементи div и им присвоете клас от „ дете ”.
- След това изберете „ родител ” и осигурете стойността на „ flex ' за CSS ' дисплей ' Имот.
- След това въведете стойност „ 1 ' към ' flex „собственост на всеки“ дете ”, който кара дъщерния елемент да се показва като flex.
След изпълнение на горния код, уеб страницата изглежда така:
Горният изход показва, че дъщерният елемент получава еднаква ширина, когато браузърът се преоразмери.
Стъпка 4: Оформление на мрежата
Оформлението на мрежата създава мрежа и присвоява HTML елементите вътре в частта на мрежата. Елементите на мрежата се променят спрямо размера на екрана на уеб страницата. Той създава адаптивен дизайн, тъй като размерът на HTML елемента се променя според екрана на устройството:
< стил >.контейнер {
дисплей: решетка;
grid-template-colons: 1fr 1fr 1fr;
}
< / стил >
< тяло >
< див клас = 'компонент' >
< див стил = 'граница: 3px плътно горскозелено;' >Linuxint< / див >
< див стил = 'граница: 3px плътно тъмнозелено;' >Linuxint< / див >
< див стил = 'граница: 3px плътно червено;' >Linuxint< / див >
< / див >
< / тяло >
В горния код:
- Първо, създайте родителски div и му присвоете клас от „ компонент ' вътре в ' <тяло> ” таг. След това създайте три дъщерни елемента div в него.
- След това в CSS файла задайте „ решетка ” стойност на „ дисплей ” собственост за „ контейнер ” div.
- След това създайте три части с еднакъв размер на уеб страницата, като използвате „ мрежа-шаблон-колона ” свойство и го задайте равно на „ 1fr 1fr 1фр ” където fr означава „ фракция ”.
След компилиране на горния код, изходът изглежда така:
Изходът показва, че div се преоразмеряват според размера на екрана с равни пропорции.
Стъпка 5: Медийни заявки
Използването на медийни заявки за създаване на отзивчив дизайн е нещо от старата школа, но все пак повечето уебсайтове използват медийни заявки. Медийните заявки могат да се добавят директно в CSS файла след добавяне на стила по подразбиране за избрания HTML елемент. Медийната заявка прави кода малко по-дълъг и объркан. Тъй като разработчикът трябва да вмъкне код за всеки размер на екрана поотделно.
Например вижте следния кодов фрагмент:
@ медии екран и ( мин. ширина : 640 пиксела ) {.компонент {
заден план- цвят : горскозелен;
}
}
В горния кодов фрагмент:
- Първо задайте медийната заявка, която прилага свойствата на CSS към избрания клас елемент ' компонент ”, когато ширината на екрана стане по-голяма от „ 640 пиксела ”.
- След това изберете „клас компонент и задайте стойността на“ горскозелен ' за ' Цвят на фона ' Имот.
.компонент {
заден план- цвят : доджърблу;
}
}
След това за горния кодов фрагмент:
- Задайте медийната заявка да прилага стилове, когато размерът на ширината е по-малък от „ 1000 пиксела ”.
- Сега изберете „ компонент ” клас и осигурете стойност „ доджърблу ' за ' Цвят на фона ' Имот:
След изпълнение на горните кодови фрагменти, изходът изглежда така:
Изходът показва, че медийната заявка променя фона въз основа на размера на екрана. Размерът на шрифта, ширината, височината и други свойства на CSS също могат да бъдат приложени, като следвате същия модел.
Възможните размери на екрана на точките на прекъсване, които трябва да се имат предвид при използване на медийните заявки, са:
- За ' малък ” размер на екрана, задайте ширината по-малка от „ 640 пиксела ”.
- За ' среден ” размер на екрана на прозореца за изглед, ширината варира между „ 641px ' и ' 1007 пиксела ”.
- За ' голям ” размер на екрана, задайте ширината на „ 1008 пиксела ” или по-голяма.
Заключение
За да създадат адаптивен дизайн на уебсайт, разработчиците трябва да добавят „ прозорец за изглед ” етикет в „ <глава> ” таг секция. След това използвайте „ Flexbox ' и ' Решетка ” Оформление. Тези модули за оформление помагат да се създаде адаптивен дизайн. В крайна сметка „ медийни заявки ” помогнете на разработчика да стилизира различни версии на един и същ уебсайт за различни размери на екрана. Тази статия демонстрира стъпките, чрез които може да се създаде адаптивен дизайн на уебсайт.