Артицле Дирецтори
Како ЦСС који реагује на мобилне уређаје приказује различите распореде који реагују на @медиа екран у складу са различитим резолуцијама?
Следећи чланак ће представити како да користите ЦСС да бисте одредили различите резолуције и приказали различите распореде ширине да бисте постигли прилагодљиву ширину.
Пријатељи у невољи могу се обратити, надам се да ће свима бити од помоћи.
Разлика између @медиа и @медиа веб страница за сито штампање
- Ако цсс треба да се користи у уређају за штампање, користите @медиа, у супротном користите @медиа сцреен.
- Међутим, ово није нужно тачно.У ствари, ако замените "сцреен" са "принт" и напишете га као @медиа принт, онда се ЦСС може користити на уређају за штампање;
- Али имајте на уму да је цсс који је декларисао @медиа принт важећи само на уређајима за штампање.
1. ДИВЦСС мали опис случаја
Прво смо поставили ЦСС ДИВ оквира под називом ".абц", поставили његову висину на 300пк и поставили ЦСС ивицу на црну;
- и подешавања
margin:0 auto
Распоред је центриран, а ова два стила су унапред подешена за лакше гледање.
Ручно превлачимо претраживач да прикажемо ширину, а затим посматрамо како се ширина оквира мења:
- Када је ширина претраживача подешена на ширину не већу од 500пк, приказује се 100пк што одговара ширини оквира;
- Када је ширина претраживача подешена на мању од 901пк, приказује се „.абц“ у складу са ширином оквира, који приказује 200пк;
- Када је ширина претраживача подешена да буде већа од 1201пк, ширина објекта оквира приказује 1200пк;
- Када је мањи од 1200 пиксела, ширина екрана је 900 пиксела.
2, ЦСС мобилни телефон мобилни терминал адаптивни код
.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* css注释:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 901px) { .abc {width: 200px;} } /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
- Треба напоменути да редослед ЦСС кода поставља ЦСС од великог ка малом (процењујући да што је ширина претраживача већа, предњи део је већи).
- Ово је због логичног односа, @медиа-ова одлука о ЦСС отклањању грешака ће довести до неуспеха пресуде.
3. ХТМЛ код
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 900px) { .abc {width: 200px;} } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ </style> </head> <body> <div class="abc">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div> </body> </html>
Напомена: однос ширине и висине уређаја
- девице-аспецт-ратио се може користити за прилагођавање уређаја са одређеним размерама екрана, што је такође корисно својство.
- На пример, наша страница жели да дефинише стил за нормалне екране са размером 4:3.
- Затим за широки екран 16:9 и 16:10 дефинишите други стил, као што су прилагодљива ширина и фиксна ширина:
- @медијски само екран и (однос ширине и висине уређаја: 4/3)
4. Компатибилан са главним претраживачима ХТМЛ+ЦСС+ЈС изворни код
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } @media screen and (max-width: 1200px) { .abc {width: 900px} } @media screen and (max-width: 900px) { .abc {width: 200px;} } @media screen and (max-width: 500px) { .abc {width: 100px;} } </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body> <div class="abc">DIV宽度会随浏览器宽度变化哦,改变浏览器宽度</div> </body> </html>
Горе наведени је прилагодљиви ЦСС за мобилни телефон, који приказује различит детаљан садржај који реагује на @медиа екран према различитим екранима.
Блог Хопе Цхен Веилианг ( https://www.chenweiliang.com/ ) Дели „Мобилни прилагодљиви ЦСС различити екрани приказују различит одзив на @медиа екран“, што вам је од помоћи.
Добродошли да поделите везу овог чланка:https://www.chenweiliang.com/cwl-2074.html
Добродошли на Телеграм канал блога Цхен Веилианг-а да бисте добили најновија ажурирања!
📚 Овај водич садржи огромну вредност, 🌟Ово је ретка прилика, не пропустите је! ⏰⌛💨
Поделите и лајкујте ако желите!
Ваше дељење и лајкови су наша стална мотивација!