HTML 5 адаптыўны экран выявы код прапарцыйнага маштабавання для вэб-старонкі HTML XNUMX

Дзякуючы хуткаму росту мабільнага Інтэрнэту,WeChat маркетынгПапулярнасць мабільных тэлефонаў сталаЖыццёабавязковы інструмент.

стварыць вэб-сайтшаблон, рэкамендуецца выкарыстоўвацьWordPressАдаптыўная тэма для:

Што азначае адаптацыя выявы CSS?

Самаадаптацыя выявы CSS адносіцца да стварэння выявы на вэб-старонцы HTML з дапамогай кода CSS:

Далей,Чэнь ВэйлянЯ падзялюся з вамі кодам прапарцыйнага маштабавання 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? У чым розніца паміж класам і ідэнтыфікатарам?Наступныя падручнікі распавядаюць пра ▼

У чым розніца паміж класам селектара CSS і id? выкарыстанне id і класа ў HTML

У чым розніца паміж класам селектара CSS і id? Выкарыстанне ідэнтыфікатара і класа ў HTML Чэнь Вэйлян у цяперашні час выконвае SEO і аптымізуе тэму WordPress вэб-сайта.Нягледзячы на ​​тое, што я даведаўся некаторыя базавыя веды аб HTML і CSS раней, але я некаторы час не працаваў з імі, асабліва з часткай CSS ...

Як мабільны вэб-сайт прайгравае відэа MP4, адаптаванае да старонкі?Націсніце на спасылку ніжэй ▼

Як вэб-старонка H5 MP4 адаптуецца да старонкі? Мабільны вэб-сайт прайгравае HTML-код відэа

Відэамаркетынг з'яўляецца неад'емнай часткай інтэрнэт-маркетынгу: многія спецыялісты па прасоўванні ў Інтэрнэце часта выкарыстоўваюць відэа ў спалучэнні з «вірусным маркетынгам» для прыцягнення трафіку.Калі маркетынг WeChat спалучаць з відэамаркетынгам, гэта можа яшчэ больш палепшыць каэфіцыент канверсіі капірайтынгу ў новых медыя і сацыяльнай электроннай камерцыі.У мяне шмат сяброў...