😎 » CSS3 » @media определяем размер
918 0  

@media определяем размер

Правило CSS @media можно использовать для применения части таблицы стилей на основе результатов одного или нескольких медиа-запросов по определению размеров екрана или  типа устройства.

Наиболее распостраненые способы использования:

/* При максимальной ширине екрана */
@media (max-width: 900px) {
  .hed-zag h2 {display:none;}
}

/* При просмотре на любых екранах и для печати */
@media screen, print  (min-width: 900px) {
  article {padding: 1rem 3rem;}
}

/* Вложено в другое условное правило */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {display: flex;}
  }
}

По ширине екрана:

/* минимум 1200px и до бесконечности или до другого большего медиа запроса */ 
@media (min-width: 1200px) { 
.demo {display:block;}
} 
 
/* минимум 768px и максимум в ширину 979px) */ 
@media (min-width: 768px) and (max-width: 979px) { 
.demo {display:block;}
} 

/* от 0рх до 480px */ 
@media (max-width: 480px) { 
.demo {display:block;}
} 


 @media смена картинки в самом  HTML в зависимостиот ширины экрана:

<body>
  <picture>
			<source	media="(max-width: 452px)"	srcset="images/mini-mal.jpg">
			<img src="images/big-mal.jpg" alt="" />
	</picture>
</body>

Более подробно о смене рисунков под экран - читать

Устройства:

Типы носителей описывают общую категорию устройства. За исключением случаев использования логических операторов not или only.


all - Подходит для всех устройств.
print - Предназначен для постраничного материала и документов, просматриваемых на экране в режиме предварительного просмотра.
screen - Предназначен в первую очередь для экранов.
speech - Предназначен для речевых синтезаторов.



Больше информации - смотреть

Все медиа правила - здесь

 
 Chrome  Edge  Firefox  Internet  Opera  Safari
1 Yes 1 6 9.2 1.3
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
1 ? Yes 4 9 3.1 ?

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023