ആർട്ടിക്കിൾ ഡയറക്ടറി
വ്യത്യസ്ത റെസല്യൂഷനുകൾക്കനുസരിച്ച് മൊബൈൽ റെസ്‌പോൺസീവ് CSS എങ്ങനെയാണ് വ്യത്യസ്ത @മീഡിയ സ്ക്രീൻ റെസ്‌പോൺസീവ് ലേഔട്ടുകൾ പ്രദർശിപ്പിക്കുന്നത്?
വ്യത്യസ്ത റെസല്യൂഷനുകൾ നിർണയിക്കുന്നതിനും അഡാപ്റ്റീവ് വീതി കൈവരിക്കുന്നതിന് വ്യത്യസ്ത വീതി ലേഔട്ടുകൾ പ്രദർശിപ്പിക്കുന്നതിനും CSS എങ്ങനെ ഉപയോഗിക്കാമെന്നത് ഇനിപ്പറയുന്ന ലേഖനം പരിചയപ്പെടുത്തും.
ആവശ്യമുള്ള സുഹൃത്തുക്കൾക്ക് ഇത് റഫർ ചെയ്യാൻ കഴിയും, ഇത് എല്ലാവർക്കും സഹായകരമാകുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.
@media, @media സ്ക്രീൻ പ്രിന്റിംഗ് വെബ് പേജുകൾ തമ്മിലുള്ള വ്യത്യാസം
- ഒരു പ്രിന്റിംഗ് ഉപകരണത്തിൽ css ഉപയോഗിക്കണമെങ്കിൽ, @media ഉപയോഗിക്കുക, അല്ലെങ്കിൽ @media സ്ക്രീൻ ഉപയോഗിക്കുക.
- എന്നിരുന്നാലും, ഇത് സത്യമായിരിക്കണമെന്നില്ല.വാസ്തവത്തിൽ, നിങ്ങൾ "സ്ക്രീൻ" എന്നതിന് പകരം "പ്രിന്റ്" ഉപയോഗിച്ച് @media പ്രിന്റ് എന്ന് എഴുതുകയാണെങ്കിൽ, പ്രിന്റിംഗ് ഉപകരണത്തിൽ CSS ഉപയോഗിക്കാനാകും;
- എന്നാൽ @media പ്രിന്റ് പ്രഖ്യാപിച്ച css പ്രിന്റിംഗ് ഉപകരണങ്ങളിൽ മാത്രമേ സാധുതയുള്ളൂ എന്നത് ശ്രദ്ധിക്കുക.
1. DIVCSS ചെറിയ കേസ് വിവരണം
ഞങ്ങൾ ആദ്യം ".abc" എന്ന പേരിൽ ഒരു DIV ബോക്‌സ് CSS സജ്ജമാക്കി, അതിന്റെ ഉയരം 300px ആക്കി, CSS ബോർഡർ കറുപ്പായി സജ്ജമാക്കി;
- ക്രമീകരണങ്ങളും
margin:0 autoലേഔട്ട് കേന്ദ്രീകൃതമാണ്, ഈ രണ്ട് ശൈലികളും എളുപ്പത്തിൽ കാണുന്നതിന് മുൻകൂട്ടി സജ്ജീകരിച്ചിരിക്കുന്നു.
വീതി പ്രദർശിപ്പിക്കുന്നതിന് ഞങ്ങൾ ബ്രൗസർ സ്വമേധയാ വലിച്ചിടുന്നു, തുടർന്ന് ബോക്‌സിന്റെ വീതി എങ്ങനെ മാറുന്നുവെന്ന് നിരീക്ഷിക്കുക:
- ബ്രൗസറിന്റെ വീതി 500px-ൽ കൂടാത്ത വീതിയിലേക്ക് ക്രമീകരിക്കുമ്പോൾ, ബോക്‌സിന്റെ വീതിക്ക് അനുയോജ്യമായി 100px ദൃശ്യമാകും;
- ബ്രൗസറിന്റെ വീതി 901px-ൽ കുറവായി ക്രമീകരിക്കുമ്പോൾ, 200px കാണിക്കുന്ന ബോക്‌സിന്റെ വീതിയുമായി ബന്ധപ്പെട്ട ".abc" പ്രദർശിപ്പിക്കും;
- ബ്രൗസർ വീതി 1201px-ൽ കൂടുതലായി ക്രമീകരിക്കുമ്പോൾ, ബോക്‌സ് ഒബ്‌ജക്റ്റിന്റെ വീതി 1200px പ്രദർശിപ്പിക്കുന്നു;
- ഇത് 1200px-ൽ കുറവായിരിക്കുമ്പോൾ, ഡിസ്പ്ലേ വീതി 900px ആണ്.
2, CSS മൊബൈൽ ഫോൺ മൊബൈൽ ടെർമിനൽ അഡാപ്റ്റീവ് കോഡ്
.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宽度 */- CSS കോഡ് ക്രമം എന്നത് CSS എന്നത് വലുതിൽ നിന്ന് ചെറുതിലേക്ക് ടൈപ്പ് സെറ്റ് ചെയ്യുകയാണ് എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ് (ബ്രൗസർ വീതി വലുതായാൽ മുൻഭാഗം കൂടുതലാണെന്ന് വിലയിരുത്തുന്നു).
- ഇത് യുക്തിസഹമായ ബന്ധം മൂലമാണ്, CSS ഡീബഗ്ഗിംഗിനെ കുറിച്ചുള്ള @media യുടെ വിധി ന്യായവിധി പരാജയപ്പെടാൻ ഇടയാക്കും.
3. HTML കോഡ്
<!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. പ്രധാന ബ്രൗസറുകളായ HTML+CSS+JS സോഴ്സ് കോഡുമായി പൊരുത്തപ്പെടുന്നു
<!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>മുകളിൽ പറഞ്ഞിരിക്കുന്നത് മൊബൈൽ ടെർമിനൽ അഡാപ്റ്റീവ് CSS ആണ്, അത് വ്യത്യസ്ത @ മീഡിയ സ്ക്രീൻ പ്രതികരിക്കുന്ന വിശദമായ ഉള്ളടക്കം വ്യത്യസ്ത സ്ക്രീനുകൾക്കനുസരിച്ച് പ്രദർശിപ്പിക്കുന്നു.
ഹോപ്പ് ചെൻ വെയ്‌ലിയാങ് ബ്ലോഗ് ( https://www.chenweiliang.com/ ) പങ്കിട്ട "മൊബൈൽ അഡാപ്റ്റീവ് CSS വ്യത്യസ്ത സ്‌ക്രീനുകളുടെ ഡിസ്പ്ലേ വ്യത്യസ്ത @മീഡിയ സ്ക്രീൻ റെസ്‌പോൺസീവ്", ഇത് നിങ്ങൾക്ക് സഹായകമാണ്.
ഈ ലേഖനത്തിന്റെ ലിങ്ക് പങ്കിടാൻ സ്വാഗതം:https://www.chenweiliang.com/cwl-2074.html
ഏറ്റവും പുതിയ അപ്‌ഡേറ്റുകൾ ലഭിക്കുന്നതിന് ചെൻ വെയ്‌ലിയാങ്ങിന്റെ ബ്ലോഗിന്റെ ടെലിഗ്രാം ചാനലിലേക്ക് സ്വാഗതം!
📚 ഈ ഗൈഡിൽ വലിയ മൂല്യമുണ്ട്, 🌟 ഇതൊരു അപൂർവ അവസരമാണ്, ഇത് നഷ്‌ടപ്പെടുത്തരുത്! ⏰⌛💨
ഇഷ്ടമായാൽ ഷെയർ ചെയ്യുക, ലൈക്ക് ചെയ്യുക!
നിങ്ങളുടെ ഷെയറിംഗും ലൈക്കുകളുമാണ് ഞങ്ങളുടെ തുടർച്ചയായ പ്രചോദനം!