Article Directory
Мобилдик интернеттин тез өнүгүшү жана WeChat маркетингинин кеңири колдонулушу менен уюлдук телефондор жашоодогу маанилүү куралга айланды .
Вебсайт шаблондору үчүн биз WordPressтин жооп берүүчү темаларын колдонууну сунуштайбыз:
- WordPress темасын иштеп чыгуучулар WordPress темасынын веб-баракчаларын иштеп чыгууда HTML 5 сүрөттөрүн экранга ылайыкташа албаса...
- Мобилдик түзмөктө веб-сайтты карап жатканда, абдан жаман сүрөттөр туура эмес болуп көрүнөт жана колдонуучунун тажрыйбасы өтө начар болот!
CSS сүрөт ыңгайлашуусу эмнени билдирет?
CSS сүрөтүн адаптациялоо CSS коду аркылуу ишке ашырылган html веб баракчаларында сүрөттөрдү жасоону билдирет:
- Автоматтык түрдө ар кандай түзүлүштөрдүн туурасына жана бийиктигине ылайыкташат.
- img теги автоматтык түрдө пропорционалдуу масштабдалат.
Андан кийин, Чен Вэйлян сиздер менен сүрөттүн өлчөмүн пропорционалдуу түрдө масштабдоо үчүн CSS кодун бөлүшөт. ^_^
CSS сүрөтүнүн бийиктиги жана туурасы ийкемдүү код
Сүрөттү htmlге кыстарыңыз:
Эгер сиз сүрөттүн туурасы жана бийиктиги боюнча туруктуу бойдон калбастан, экрандын өлчөмүнө ылайыкташуусун кааласаңыз.
Сиз төмөнкү кодду WordPress темаңыздын style.css файлына кошо аласыз ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }Бул жерде билдирүүmax-widthмаксималдуу туурасы эрежеси
- бардык сүрөттөр 100% максимум менен көрсөтүлүшүн камсыз кылуу үчүн (б.а. алар сүрөттүн өзүндөй чоңдукта гана көрсөтүлүшү мүмкүн).
- Бул учурда, эгер сүрөттү камтыган элемент (мисалы, сүрөттү камтыган корпус же div) сүрөттүн эндигинен кичине болсо, сүрөт максималдуу жеткиликтүү мейкиндикти толтуруу үчүн масштабдалат.
width:auto;автоматтык туурасын билдирет
\9 Бул hack css жазуу ыкмасы.
- Бул ыкма кадимки css кодуна "\9" кошот.Бир гана IE браузери аны тааный алат, башка браузерлер бул билдирүүнү этибарга албайт.
- Бул браузерди дифференциациялоого жетишет жана шайкеш браузерлердин максатын иштетет.
Эмне үчүн width:100% колдонбойсуз?
Сүрөттөрдүн автоматтык масштабын жетүү үчүн, сиз, мисалы, кеңири таралган атрибутун колдоно аласызwidth：100％.
Бирок, бул эреже бул жерде колдонулбайт.
- Анткени бул эреже аны өзүнүн контейнериндей кенен кылып көрсөтөт.
- Контейнер сүрөттөлүштөн бир топ кененирээк болгон учурларда, сүрөт ашыкча созулат.
Коопсуздук чаралары
CSS селекторлор деген эмне? Класс менен id ортосунда кандай айырма бар? Төмөнкү окуу куралы бул тууралуу сөз болот ▼
Мобилдик веб-сайтта MP4 видеолорун ойнотууда баракчаны кантип ыңгайлаштыруу керек? Төмөнкү шилтемени басыңыз ▼
Чен Вэйляндын блогунда ( https://www.chenweiliang.com/ ) бөлүшүлгөн "Веб-баракчаларда экрандын өлчөмүнө жана пропорционалдуу өлчөмгө ылайыкташтыруу үчүн HTML 5 сүрөтүнүн өлчөмүн өзгөртүү коду" макаласы сизге пайдалуу болот деп үмүттөнөбүз.
Бул макаланын шилтемеси менен бөлүшүүдөн тартынбаңыз: https://www.chenweiliang.com/cwl-964.html