Директориум за статии
Како мобилниот одговорен CSS прикажува различни распореди со одговор на @media екранот според различни резолуции?
Следната статија ќе воведе како да се користи CSS за да се одредат различни резолуции и да се прикажат различни распореди на ширина за да се постигне адаптивна ширина.
Пријателите на кои им е потребна може да се повикаат на него, се надевам дека ќе биде корисно за сите.
Разликата помеѓу @media и @media веб-страниците за печатење на екранот
- Ако css треба да се користи во уред за печатење, користете @media, во спротивно, користете @media екран.
- Сепак, ова не мора да е точно. Всушност, ако го замените „screen“ со „print“ и го напишете како @media print, тогаш CSS може да се користи на уредот за печатење;
- Но, имајте во предвид дека css-от деклариран од @media print важи само за уредите за печатење.
1. Опис на мали случаи на DIVCSS
Прво поставивме DIV-кутија CSS со име „.abc“, ја поставивме неговата висина на 300 px и ја поставивме границата на CSS на црна;
- и поставувања
margin:0 autoРаспоредот е центриран и овие два стила се претходно поставени за лесно гледање.
Рачно го влечеме прелистувачот за да ја прикаже ширината, а потоа набљудуваме како се менува ширината на полето:
- Кога ширината на прелистувачот е прилагодена на ширина не поголема од 500 px, се прикажуваат 100 px што одговараат на ширината на полето;
- Кога ширината на прелистувачот е прилагодена да биде помала од 901 px, се прикажува „.abc“ што одговара на ширината на полето, кое прикажува 200 px;
- Кога ширината на прелистувачот е прилагодена да биде поголема од 1201 px, ширината на објектот на полето прикажува 1200 px;
- Кога е помала од 1200 пиксели, ширината на екранот е 900 пиксели.
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 од голем до мал (судејќи дека колку е поголема ширината на прелистувачот, толку е поголема предната страна).
- Ова е поради логичната врска, проценката на @media за дебагирање на CSS ќе предизвика пресудата да не успее.
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 за мобилен телефон, кој прикажува различни детални содржини на @media екранот според различни екрани.
Блог на Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Споделено „Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness“, што е корисно за вас.
Добредојдовте да ја споделите врската од оваа статија:https://www.chenweiliang.com/cwl-2074.html
Добредојдовте на Телеграмскиот канал на блогот на Чен Веилијанг за да ги добиете најновите ажурирања!
📚 Овој водич содржи огромна вредност, 🌟Ова е ретка можност, не ја пропуштајте! ⏰⌛💨
Споделете и лајкнете ако ви се допаѓа!
Вашето споделување и лајкови се наша континуирана мотивација!