Akwụkwọ ndekọ ederede
Kedu ka CSS na-anabata ekwentị si egosipụta nhazi ihuenyo dị iche iche @media dị ka mkpebi dị iche iche si dị?
Isiokwu na-esonụ ga-ewebata otu esi eji CSS chọpụta mkpebi dị iche iche na igosipụta nhazi obosara dị iche iche iji nweta obosara mgbanwe.
Ndị enyi nọ na mkpa nwere ike ịtu aka na ya, enwere m olileanya na ọ ga-enyere onye ọ bụla aka.
Ọdịiche dị n'etiti @media na @media ibe weebụ obibi akwụkwọ
- Ọ bụrụ na achọrọ iji css na ngwaọrụ obibi akwụkwọ, jiri @media, ma ọ bụghị ya, jiri ihuenyo @media.
- Otú ọ dị, nke a abụghị eziokwu, n'ezie, ọ bụrụ na ị dochie "screen" na "ebipụta" wee dee ya dị ka @media ebipụta, mgbe ahụ, CSS nwere ike iji na-ebi akwụkwọ ngwaọrụ;
- Mana mara na css nke @media ebipụta kwuputara na-arụ ọrụ naanị na ngwaọrụ obibi.
1. DIVCSS obere nkọwa
Anyị buru ụzọ debe igbe DIV CSS aha ya bụ ".abc", tọọ ịdị elu ya ka ọ bụrụ 300px, ma debe oke CSS ka ọ bụrụ oji;
- na ntọala
margin:0 autoNhazi ahụ gbadoro ụkwụ n'ihu, ma ụdị abụọ a edoberela maka nlele dị mfe.
Anyị na-eji aka na-adọkpụrụ ihe nchọgharị ahụ iji gosipụta obosara, wee hụ ka obosara igbe ahụ si agbanwe:
- Mgbe a na-edozi obosara ihe nchọgharị na obosara nke na-erughị 500px, 100px na-egosipụta kwekọrọ na obosara nke igbe ahụ;
- Mgbe obosara nke ihe nchọgharị ahụ na-emezi ka ọ bụrụ ihe na-erughị 901px, a na-egosipụta ".abc" kwekọrọ na obosara nke igbe ahụ, nke gosipụtara 200px;
- Mgbe emeziri obosara ihe nchọgharị ka ọ dị ukwuu karịa 1201px, obosara igbe ihe na-egosipụta 1200px;
- Mgbe ọ na-erughị 1200px, obosara ngosi bụ 900px.
2, CSS ekwentị mkpanaaka mobile ọnụ akara mgbanwe koodu
.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宽度 */- Ekwesiri iburu n'uche na usoro koodu CSS na-ede CSS site na nnukwu gaa na obere (na-ekpebi na obosara ihe nchọgharị ahụ buru ibu, nke dị elu n'ihu).
- Nke a bụ n'ihi mmekọrịta ezi uche dị na ya, ikpe @media nke CSS debugging ga-eme ka ikpe ahụ daa.
3. HTML koodu
<!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>Mara: ngwaọrụ-akụkụ-ratio
- Enwere ike iji ngwaọrụ-akụkụ-ratio dabara ngwaọrụ nwere oke akụkụ ihuenyo, nke bụkwa ihe bara uru.
- Dịka ọmụmaatụ, ibe anyị chọrọ ịkọwapụta ụdị maka enyo nkịtị nwere akụkụ nke 4: 3.
- Mgbe ahụ maka 16:9 na 16:10 widescreen, kọwapụta ụdị ọzọ, dị ka obosara mgbanwe na obosara edoziri:
- @media naanị ihuenyo na (ngwaọrụ-akụkụ-ratio:4/3)
4. Dakọtara na isi ihe nchọgharị HTML+CSS+JS koodu isi mmalite
<!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>Nke dị n'elu bụ CSS na-emegharị ekwentị, nke na-egosiputa ọdịnaya dị iche iche @media ihuenyo na-anabata nke ọma dịka ihuenyo dị iche iche si dị.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Kekọrịtara "Mobile Adaptive CSS Ngosipụta ihuenyo dị iche iche @media ihuenyo nzaghachi", nke na-enyere gị aka.
Nnọọ ka ị kesaa njikọ nke akụkọ a:https://www.chenweiliang.com/cwl-2074.html
Nabata na ọwa Telegram nke blọgụ Chen Weiliang ka ị nweta mmelite kachasị ọhụrụ!
📚 Ntuziaka a nwere nnukwu uru, 🌟Nke a bụ ohere dị ụkọ, echefula ya! ⏰⌛💨
Kekọrịta na-amasị ma ọ bụrụ na-amasị gị!
Ịkekọrịta na mmasị gị bụ mkpali anyị na-aga n'ihu!