Artikulo Direktoryo
Paano ipinapakita ng mobile responsive CSS ang iba't ibang mga layout ng tumutugon sa screen ng @media ayon sa iba't ibang mga resolusyon?
Ang susunod na artikulo ay magpapakilala kung paano gamitin ang CSS upang matukoy ang iba't ibang mga resolusyon at magpakita ng iba't ibang mga layout ng lapad upang makamit ang adaptive na lapad.
Maaaring sumangguni dito ang mga kaibigang nangangailangan, sana ay makatulong ito sa lahat.
Ang pagkakaiba sa pagitan ng @media at @media screen printing na mga web page
- Kung ang css ay kailangang gamitin sa isang printing device, gamitin ang @media, kung hindi, gamitin ang @media screen.
- Gayunpaman, hindi talaga ito totoo. Sa katunayan, kung papalitan mo ang "screen" ng "print" at isulat ito bilang @media print, maaaring gamitin ang CSS sa device sa pag-print;
- Ngunit tandaan na ang css na idineklara ng @media print ay valid lamang sa mga device sa pag-print.
1. DIVCSS maliit na paglalarawan ng kaso
Nagtakda muna kami ng DIV box CSS na pinangalanang ".abc", itinakda ang taas nito sa 300px, at itinakda ang hangganan ng CSS sa itim;
- at mga setting
margin:0 autoNakasentro ang layout, at ang dalawang istilong ito ay paunang itinakda para sa madaling pagtingin.
Manu-mano naming i-drag ang browser upang ipakita ang lapad, at pagkatapos ay obserbahan kung paano nagbabago ang lapad ng kahon:
- Kapag ang lapad ng browser ay naayos sa lapad na hindi hihigit sa 500px, ang 100px ay ipinapakita na naaayon sa lapad ng kahon;
- Kapag ang lapad ng browser ay naayos na mas mababa sa 901px, ang ".abc" ay ipinapakita na tumutugma sa lapad ng kahon, na nagpapakita ng 200px;
- Kapag ang lapad ng browser ay na-adjust upang maging mas malaki sa 1201px, ang lapad ng box object ay nagpapakita ng 1200px;
- Kapag ito ay mas mababa sa 1200px, ang lapad ng display ay 900px.
2, CSS mobile phone terminal adaptive code
.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宽度 */- Dapat tandaan na ang pagkakasunud-sunod ng code ng CSS ay nagtatakda ng CSS mula malaki hanggang maliit (kung mas malaki ang lapad ng browser, mas mataas ang harap).
- Ito ay dahil sa lohikal na relasyon, ang paghatol ng @media sa pag-debug ng CSS ay magiging sanhi ng paghuhusga upang mabigo.
3. HTML code
<!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>Tandaan: device-aspect-ratio
- Maaaring gamitin ang device-aspect-ratio upang magkasya ang mga device na may partikular na mga aspect ratio ng screen, na isa ring kapaki-pakinabang na property.
- Halimbawa, gusto ng aming page na tumukoy ng istilo para sa mga normal na screen na may aspect ratio na 4:3.
- Pagkatapos, para sa 16:9 at 16:10 na widescreen, tumukoy ng isa pang istilo, gaya ng adaptive width at fixed width:
- @media only screen at (device-aspect-ratio:4/3)
4. Tugma sa mga pangunahing browser HTML+CSS+JS source code
<!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>Ang nasa itaas ay ang mobile terminal adaptive CSS, na nagpapakita ng iba't ibang @media screen na tumutugon sa detalyadong nilalaman ayon sa iba't ibang mga screen.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Ibinahagi ang "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", na nakakatulong sa iyo.
Maligayang pagdating upang ibahagi ang link ng artikulong ito:https://www.chenweiliang.com/cwl-2074.html
Maligayang pagdating sa Telegram channel ng blog ni Chen Weiliang para makuha ang pinakabagong mga update!
📚 Ang gabay na ito ay naglalaman ng malaking halaga, 🌟Ito ay isang bihirang pagkakataon, huwag palampasin ito! ⏰⌛💨
Share and like kung gusto mo!
Ang iyong pagbabahagi at pag-like ay ang aming patuloy na pagganyak!