ആർട്ടിക്കിൾ ഡയറക്ടറി
കുതിച്ചുയരുന്ന മൊബൈൽ ഇന്റർനെറ്റ് കാരണം,വെചാറ്റ് മാർക്കറ്റിംഗ്മൊബൈൽ ഫോണുകളുടെ ജനപ്രീതിയായി മാറിയിരിക്കുന്നുജീവിതംനിർബന്ധമായും ഉണ്ടായിരിക്കേണ്ട ഉപകരണം.
ഒരു വെബ്സൈറ്റ് നിർമ്മിക്കുകടെംപ്ലേറ്റ്, അത് ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നുവേർഡ്പ്രൈസ്ഇതിനായുള്ള അഡാപ്റ്റീവ് തീം:
- വേർഡ്പ്രസ്സ് തീം പേജ് രൂപകൽപ്പന ചെയ്യുമ്പോൾ വേർഡ്പ്രസ്സ് തീം ഡെവലപ്പർ HTML 5 ഇമേജ് അഡാപ്റ്റീവ് സ്ക്രീൻ നന്നായി നിർമ്മിച്ചില്ലെങ്കിൽ...
- ഒരു മൊബൈൽ ഉപകരണത്തിൽ വെബ്സൈറ്റ് ബ്രൗസുചെയ്യുമ്പോൾ, വളരെ വൃത്തികെട്ട ചിത്ര സ്ഥാനഭ്രംശം ഉണ്ടാകും, കൂടാതെ ഉപയോക്തൃ അനുഭവം വളരെ മോശമാണ്!
CSS ഇമേജ് അഡാപ്റ്റീവ് എന്താണ് അർത്ഥമാക്കുന്നത്?
CSS ഇമേജ് സ്വയം-അഡാപ്റ്റേഷൻ എന്നത് CSS കോഡ് വഴി html വെബ് പേജിൽ ചിത്രങ്ങൾ നിർമ്മിക്കുന്നതിനെ സൂചിപ്പിക്കുന്നു:
- വ്യത്യസ്ത ഉപകരണങ്ങളുടെ വീതിയും ഉയരവും സ്വയമേവ പൊരുത്തപ്പെടുത്തുക.
- img ടാഗ് സ്വയമേ ആനുപാതികമായി സ്കെയിൽ ചെയ്യപ്പെടുന്നു.
അടുത്തത്,ചെൻ വെയ്‌ലിയാങ്ഞാൻ നിങ്ങളുമായി CSS img ആനുപാതിക സ്കെയിലിംഗ് കോഡ് ^_^ പങ്കിടും
CSS ഇമേജ് ഉയരവും വീതിയും അഡാപ്റ്റീവ് കോഡ്
html-ൽ ചിത്രം ചേർക്കുക:
വീതിയിലും ഉയരത്തിലും സ്ഥിരമായി നിൽക്കുന്നതിന് പകരം സ്‌ക്രീനിന്റെ ചെറിയ വലുപ്പവുമായി ഇമേജ് പൊരുത്തപ്പെടാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ.
നിങ്ങളുടെ വേർഡ്പ്രസ്സ് തീമിന്റെ style.css ഫയലിലേക്ക് ഇനിപ്പറയുന്ന കോഡ് ചേർക്കാവുന്നതാണ് ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }പ്രസ്താവന ഇവിടെmax-widthപരമാവധി വീതി നിയമം
- എല്ലാ ചിത്രങ്ങളും പരമാവധി 100% പ്രദർശിപ്പിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ (അതായത്, അവ സ്വന്തം ഇമേജുകൾ പോലെ മാത്രം വലുതായി പ്രദർശിപ്പിക്കാൻ കഴിയും).
- ഈ ഘട്ടത്തിൽ, ചിത്രം ഉൾക്കൊള്ളുന്ന ഘടകം (ഉദാഹരണത്തിന്, ചിത്രം ഉൾക്കൊള്ളുന്ന ബോഡി അല്ലെങ്കിൽ ഡിവി) ചിത്രത്തിന്റെ അന്തർലീനമായ വീതിയേക്കാൾ ചെറുതാണെങ്കിൽ, ലഭ്യമായ പരമാവധി ഇടം നിറയ്ക്കാൻ ചിത്രം സ്കെയിൽ ചെയ്യും.
width:auto;ഓട്ടോമാറ്റിക് വീതി എന്നാണ് അർത്ഥമാക്കുന്നത്
\9 ഇത് ഹാക്ക് css എഴുതാനുള്ള ഒരു രീതിയാണ്.
- ഈ രീതിയിൽ, "\9" സാധാരണ css കോഡിലേക്ക് ചേർക്കുന്നു, IE ബ്രൗസറിന് മാത്രമേ ഇത് തിരിച്ചറിയാൻ കഴിയൂ, മറ്റ് ബ്രൗസറുകൾ ഈ പ്രസ്താവന അവഗണിക്കും.
- ഇത് ബ്രൗസർ വ്യത്യാസം കൈവരിക്കും, അനുയോജ്യമായ ബ്രൗസറുകളുടെ ഉദ്ദേശ്യം പ്രവർത്തനക്ഷമമാക്കും.
എന്തുകൊണ്ട് വീതി ഉപയോഗിക്കരുത്: 100%?
ചിത്രങ്ങളുടെ യാന്ത്രിക സ്കെയിലിംഗ് നേടുന്നതിന്, നിങ്ങൾക്ക് സാധാരണയായി ഉപയോഗിക്കുന്ന വീതി ഗുണങ്ങളും ഉപയോഗിക്കാം, ഉദാ.width：100％.
എന്നിരുന്നാലും, ഈ നിയമം ഇവിടെ ബാധകമല്ല.
- കാരണം ഈ നിയമം അതിനെ അതിന്റെ കണ്ടെയ്നർ പോലെ വിശാലമാക്കും.
- കണ്ടെയ്നർ ചിത്രത്തേക്കാൾ വളരെ വീതിയുള്ള സന്ദർഭങ്ങളിൽ, ചിത്രം അനാവശ്യമായി നീട്ടും.
മുൻകരുതലുകൾ
എന്താണ് CSS സെലക്ടറുകൾ? ക്ലാസും ഐഡിയും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്?ഇനിപ്പറയുന്ന ട്യൂട്ടോറിയലുകൾ ▼-നെക്കുറിച്ച് സംസാരിക്കുന്നു
മൊബൈൽ വെബ്സൈറ്റിൽ MP4 വീഡിയോ പ്ലേ ചെയ്യാൻ പേജ് എങ്ങനെ ക്രമീകരിക്കാം?താഴെയുള്ള ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുക ▼
ഹോപ്പ് ചെൻ വെയ്‌ലിയാങ് ബ്ലോഗ് ( https://www.chenweiliang.com/ ) "വെബ് പേജ് HTML 5 ഇമേജ് അഡാപ്റ്റീവ് സ്ക്രീൻ img ആനുപാതിക സ്കെയിലിംഗ് കോഡ്" പങ്കിട്ടു, ഇത് നിങ്ങൾക്ക് സഹായകരമാണ്.
ഈ ലേഖനത്തിന്റെ ലിങ്ക് പങ്കിടാൻ സ്വാഗതം:https://www.chenweiliang.com/cwl-964.html
ഏറ്റവും പുതിയ അപ്‌ഡേറ്റുകൾ ലഭിക്കുന്നതിന് ചെൻ വെയ്‌ലിയാങ്ങിന്റെ ബ്ലോഗിന്റെ ടെലിഗ്രാം ചാനലിലേക്ക് സ്വാഗതം!
📚 ഈ ഗൈഡിൽ വലിയ മൂല്യമുണ്ട്, 🌟 ഇതൊരു അപൂർവ അവസരമാണ്, ഇത് നഷ്‌ടപ്പെടുത്തരുത്! ⏰⌛💨
ഇഷ്ടമായാൽ ഷെയർ ചെയ്യുക, ലൈക്ക് ചെയ്യുക!
നിങ്ങളുടെ ഷെയറിംഗും ലൈക്കുകളുമാണ് ഞങ്ങളുടെ തുടർച്ചയായ പ്രചോദനം!