Справочник на статиите
Как адаптивният за мобилни устройства CSS показва различни адаптивни оформления на @media екрана според различните разделителни способности?
Следващата статия ще представи как да използвате CSS за определяне на различни разделителни способности и показване на оформления с различна ширина, за да постигнете адаптивна ширина.
Приятели в нужда могат да се обърнат към него, надявам се, че ще бъде полезно за всички.
Разликата между @media и @media ситопечат на уеб страници
- Ако css трябва да се използва в печатащо устройство, използвайте @media, в противен случай използвайте @media screen.
- Това обаче не е непременно вярно.Всъщност, ако замените "екран" с "печат" и го напишете като @media print, тогава CSS може да се използва на печатащото устройство;
- Но имайте предвид, че css, деклариран от @media print, е валиден само на печатащи устройства.
1. DIVCSS описание на малък случай
Първо задаваме CSS на поле DIV с име ".abc", задаваме височината му на 300px и задаваме границата на CSS на черно;
- и настройки
margin:0 autoОформлението е центрирано и тези два стила са предварително зададени за лесно гледане.
Ние ръчно плъзгаме браузъра, за да покажем ширината, и след това наблюдаваме как се променя ширината на полето:
- Когато ширината на браузъра е настроена на ширина не повече от 500px, се показват 100px, съответстващи на ширината на полето;
- Когато ширината на браузъра е настроена да бъде по-малка от 901px, се показва ".abc", съответстващ на ширината на полето, което показва 200px;
- Когато ширината на браузъра е настроена да бъде по-голяма от 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 от голям към малък (съдейки, че колкото по-голяма е ширината на браузъра, толкова по-висока е предната част).
- Това се дължи на логическата връзка, преценката на @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>Забележка: устройство-aspect-ratio
- device-aspect-ratio може да се използва за напасване на устройства със специфични аспектни съотношения на екрана, което също е полезно свойство.
- Например, нашата страница иска да дефинира стил за нормални екрани със съотношение на страните 4:3.
- След това за 16:9 и 16:10 широкоекранен дефинирайте друг стил, като например адаптивна ширина и фиксирана ширина:
- @media only екран и (device-aspect-ratio: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