Каталог артыкулаў
Дзякуючы хуткаму росту мабільнага Інтэрнэту,WeChat маркетынгПапулярнасць мабільных тэлефонаў сталаЖыццёабавязковы інструмент.
стварыць вэб-сайтшаблон, рэкамендуецца выкарыстоўвацьWordPressАдаптыўная тэма для:
- Калі пры распрацоўцы старонкі тэмы WordPress распрацоўшчык тэмы WordPress не зрабіў адаптыўны экран для выявы HTML 5...
- Пры праглядзе вэб-сайта на мабільнай прыладзе будзе вельмі непрыгожая дыслакацыя карцінкі, а карыстальніцкі досвед вельмі дрэнны!
Што азначае адаптацыя выявы CSS?
Самаадаптацыя выявы CSS адносіцца да стварэння выявы на вэб-старонцы HTML з дапамогай кода CSS:
- Аўтаматычна адаптавацца да шырыні і вышыні розных прылад.
- Тэг img аўтаматычна прапарцыйна маштабуецца.
Далей,Чэнь ВэйлянЯ падзялюся з вамі кодам прапарцыйнага маштабавання CSS img ^_^
Адаптыўны код CSS па вышыні і шырыні
Уставіць малюнак у HTML:
Калі вы хочаце, каб выява адаптавалася да маленькага памеру экрана, а не заставалася фіксаванай па шырыні і вышыні.
Вы можаце дадаць наступны код у файл style.css вашай тэмы WordPress ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }заява тутmax-widthправіла максімальнай шырыні
- каб пераканацца, што ўсе выявы адлюстроўваюцца на максімум 100% (г.зн. яны могуць адлюстроўвацца толькі такімі вялікімі, як іх уласныя выявы).
- У гэты момант, калі элемент, які змяшчае малюнак (напрыклад, цела або div, які змяшчае малюнак), меншы за ўласцівую шырыню відарысу, малюнак будзе маштабавацца, каб запоўніць максімальную даступную прастору.
width:auto;азначае аўтаматычную шырыню
\9 Гэта спосаб напісання hack css.
- Такім чынам, "\9" дадаецца да звычайнага кода css, толькі браўзер IE можа распазнаць яго, іншыя браўзеры будуць ігнараваць гэта выказванне.
- Гэта дазволіць дасягнуць дыферэнцыяцыі браўзераў, уключыўшы мэту сумяшчальных браўзераў.
Чаму б не выкарыстоўваць шырыню: 100%?
Каб дамагчыся аўтаматычнага маштабавання малюнкаў, вы таксама можаце выкарыстоўваць найбольш часта выкарыстоўваюцца ўласцівасці шырыні, напрыклад.width：100％.
Аднак гэтае правіла тут не дзейнічае.
- Таму што гэтае правіла зробіць яго такім жа шырокім, як яго кантэйнер.
- У тых выпадках, калі кантэйнер нашмат шырэйшы за малюнак, малюнак будзе расцягвацца без патрэбы.
注意 事项
Што такое селектары CSS? У чым розніца паміж класам і ідэнтыфікатарам?Наступныя падручнікі распавядаюць пра ▼
Як мабільны вэб-сайт прайгравае відэа MP4, адаптаванае да старонкі?Націсніце на спасылку ніжэй ▼
Блог Hope Chen Weiliang ( https://www.chenweiliang.com/ ) падзяліўся "Кодам прапарцыйнага маштабавання вэб-старонкі HTML 5, адаптыўным экранам, малюнкам", які быў карысным для вас.
Запрашаем падзяліцца спасылкай на гэты артыкул:https://www.chenweiliang.com/cwl-964.html