Tuhinga Tuhinga
He pehea te whakaatu a CSS urupare pūkoro rereke i nga whakatakotoranga urupare mata @media e ai ki nga whakataunga rereke?
Ko te tuhinga e whai ake nei ka whakaatu me pehea te whakamahi CSS ki te whakatau i nga whakataunga rereke me te whakaatu i nga whakatakotoranga whanui rereke hei whakatutuki i te whanui urutau.
Ka taea e nga hoa mate te korero ki a ia, ko taku tumanako ka awhina i te katoa.
Ko te rereketanga i waenga i te @media me te @media ki nga wharangi tukutuku ta mata
- Mēnā me whakamahi te css ki tētahi taputapu tā, whakamahia @media, ki te kore, whakamahia te mata @media.
- Heoi, ehara tenei i te mea pono. Inaa, ki te whakakapi koe i te "mata" ki te "ta" ka tuhia hei taa @media, ka taea te whakamahi CSS ki runga i te taputapu ta;
- Engari kia mahara ko te css i whakapuakihia e te @media print he mana anake i runga i nga taputapu ta.
1. DIVCSS whakaahuatanga take iti
I te tuatahi ka whakaturia e matou he pouaka DIV CSS ko te ingoa ".abc", ka whakatauhia tona teitei ki te 300px, ka tautuhi i te taitapa CSS ki te pango;
- me nga tautuhinga
margin:0 autoKo te tahora kei te pokapū, a ko enei momo e rua kua whakaritea i mua mo te tirohanga ngawari.
Ka toia a ringatia e matou te kaitirotiro hei whakaatu i te whanui, ka kite i te huringa o te whanui o te pouaka:
- Ina whakatikahia te whanui o te tirotiro ki te whanui kaua e neke ake i te 500px, ka whakaatuhia te 100px ki te whanui o te pouaka;
- Ina whakatikahia te whanui o te tirotiro kia iti iho i te 901px, ka whakaatuhia te ".abc" ki te whanui o te pouaka, e whakaatu ana i te 200px;
- Ina whakatikahia te whanui tirotiro kia nui ake i te 1201px, ka whakaatu te whanui o te ahanoa pouaka i te 1200px;
- Ina iti iho i te 1200px, ko te whanui whakaatu he 900px.
2, CSS waea pūkoro tauranga urutau waehere
.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宽度 */- Me tohu ko te raupapa waehere CSS e tuhi ana i te CSS mai i te rahi ki te iti (ka whakatau ko te nui o te whanui tirotiro, ko te teitei o mua).
- Na te hononga arorau tenei, ko te whakatau a @media mo te patuiro CSS ka kore te whakatau.
3. Waehere 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>Tuhipoka: taputapu-ahuatanga owehenga
- Ka taea te whakamahi i te owehenga-aahu-a-ira ki te whakauru i nga taputapu me nga owehenga ahuatanga mata motuhake, he taonga whai hua hoki.
- Hei tauira, e hiahia ana ta maatau wharangi ki te tautuhi i tetahi ahua mo nga mata noa me te ahua o te 4:3.
- Na mo te mata whanui 16:9 me te 16:10, tautuhia tetahi atu ahua, penei i te whanui urutau me te whanui pumau:
- @pāpāho anake te mata me te (pūrere-ahua-ōwehenga:4/3)
4. Hototahi ki nga kaitirotiro nui HTML+CSS+JS waehere pūtake
<!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>Ko runga ake nei ko te CSS urutau waea pūkoro, e whakaatu ana i nga korero rereke @media mata e aro ana ki nga korero taipitopito e ai ki nga mata rereke.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Tirihia "Nga Mata Rerekē CSS Adaptive Pukoro Whakaatu Rerekē @media Whakautu Mata Mata", he pai ki a koe.
Nau mai ki te tohatoha i te hono o tenei tuhinga:https://www.chenweiliang.com/cwl-2074.html
Nau mai ki te hongere Telegram o te blog a Chen Weiliang ki te tiki i nga korero hou!
📚 He uara nui tenei aratohu, 🌟He waahi onge tenei, kaua e ngaro! ⏰⌛💨
Tohaina me te pai ki te pai koe!
Ko to tiritiri me o hiahia ko to maatau hihiri tonu!