Media queries css шпаргалка

bartholomej / css-media-queries-cheat-sheet.css

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

/*——————————————

Responsive Grid Media Queries — 1280, 1024, 768, 480

1280-1024 — desktop (default grid)

1024-768 — tablet landscape

768-480 — tablet

480-less — phone landscape & smaller

———————————————*/

@media all and ( min-width : 1024 px ) and ( max-width : 1280 px )

@media all and ( min-width : 768 px ) and ( max-width : 1024 px )

@media all and ( min-width : 480 px ) and ( max-width : 768 px )

@media all and ( max-width : 480 px )

/*——————————————

Foundation Media Queries

http://foundation.zurb.com/docs/media-queries.html

———————————————*/

/* Small screens — MOBILE */

@media only screen < >/* Define mobile styles — Mobile First */

@media only screen and ( max-width : 40 em ) < >/* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens — TABLET */

@media only screen and ( min-width : 40.063 em ) < >/* min-width 641px, medium screens */

@media only screen and ( min-width : 40.063 em ) and ( max-width : 64 em ) < >/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens — DESKTOP */

@media only screen and ( min-width : 64.063 em ) < >/* min-width 1025px, large screens */

@media only screen and ( min-width : 64.063 em ) and ( max-width : 90 em ) < >/* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens */

@media only screen and ( min-width : 90.063 em ) < >/* min-width 1441px, xlarge screens */

@media only screen and ( min-width : 90.063 em ) and ( max-width : 120 em ) < >/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */

@media only screen and ( min-width : 120.063 em ) < >/* min-width 1921px, xlarge screens */

/*——————————————*/

/* Portrait */

@media screen and ( orientation : portrait) < /* Portrait styles here */ >

/* Landscape */

@media screen and ( orientation : landscape) < /* Landscape styles here */ >

/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */

@media screen and ( -webkit-max-device-pixel-ratio : 1 )

>

/* Retina */

@media only screen and ( -webkit-min-device-pixel-ratio : 1.5 ) ,

only screen and ( -o-min-device-pixel-ratio : 3 / 2 ) ,

only screen and ( min—moz-device-pixel-ratio : 1.5 ) ,

only screen and ( min-device-pixel-ratio : 1.5 )

>

/* iPhone Portrait */

@media screen and ( max-device-width : 480 px ) and ( orientation : portrait)

>

/* iPhone Landscape */

@media screen and ( max-device-width : 480 px ) and ( orientation : landscape)

>

/* iPad Portrait */

@media screen and ( min-device-width : 481 px ) and ( orientation : portrait)

>

/* iPad Landscape */

@media screen and ( min-device-width : 481 px ) and ( orientation : landscape)

>

/*——————————————

Live demo samples

— http://andrelion.github.io/mediaquery/livedemo.html

———————————————*/

Источник

Media queries — шпаргалка основных медиа-запросов в CSS

Я здесь не буду расписывать основы адаптивного веб-дизайна и преимущества адаптивного сайта. Когда страница автоматически подстраивается под различные разрешения мониторов — это, безусловно, здорово и принесёт вам дополнительный трафик с мобильных устройств и планшетов. Владельцы ноутов с небольшим разрешением монитора тоже скажут вам спасибо.

Я оставлю шпаргалку основных медиа запросов (media queries), которые использую на практике сам. Понятное дело, что абсолютно все устройства эти запросы не покроют. При необходимости пишите свои media queries, проставляя нужные контрольные точки. Существует уже определённая статистика, согласно которой есть ряд особо популярных разрешений мониторов, на которые стоит ориентироваться в первую очередь. Вот такая статистика за 2020 год:

Разрешение	Пользователей	Динамика
1366×768	21.15 %	-1.46%
360×640	18.28 %	+2.31%
1920×1080	12.29 %-0.85%	-0.85%
1280×1024	6.94 %	-0.40%
1600×900	4.57 %	-0.23%
375×667	4.36 %	+0.48%
1024×768	4.08 %	-0.26%
320×568	3.83 %	+0.10%
1440×900	3.16 %	-0.19%
1280×800	3.08 %	-0.02%
1680×1050	2.03 %	-0.25%
768×1024	2.00 %	+0.07%
1536×864	1.93 %	+0.22%
320×534	1.84 %	+0.05%
320×570	1.62 %	+0.09%
1280×720	1.42 %	+0.04%
1360×768	1.05 %	-0.22%

Должен быть подключен мета тег viewport :

Шпаргалка Media queries CSS

/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */ @media only screen and (min-width : 320px) and (max-width : 480px) < /* стили */ >/* Smartphones (горизонтальная) ----------- */ @media only screen and (min-width: 321px) < /* стили */ >/* Smartphones (вертикальная) ----------- */ @media only screen and (max-width: 320px) < /* стили */ >/* iPads (вертикальная и горизонтальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) < /* стили */ >/* iPads (горизонтальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) < /* стили */ >/* iPads (вертикальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) < /* стили */ >/* iPad 3**********/ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >/* Настольные компьютеры и ноутбуки ----------- */ @media only screen and (min-width: 1224px) < /* стили */ >/* Большие экраны ----------- */ @media only screen and (min-width: 1824px) < /* стили */ >/* iPhone 4 ----------- */ @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) < /* стили */ >/* iPhone 5 ----------- */ @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* iPhone 6 ----------- */ @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* iPhone 6+ ----------- */ @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* Samsung Galaxy S3 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) < /* стили */ >@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) < /* стили */ >/* Samsung Galaxy S4 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) < /* стили */ >@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) < /* стили */ >/* Samsung Galaxy S5 ----------- */ @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) < /* стили */ >@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)< /* стили */ >

Сервисы по проверке сайта на адаптивность:

Источник

CSS Media Queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

Browser Support

The numbers in the table specifies the first browser version that fully supports the @media rule.

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the all type will be implied.

You can also have different stylesheets for different media:

CSS3 Media Types

Value	Description
all	Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that «reads» the page out loud

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example

More Media Query Examples

For much more examples on media queries, go to the next page: CSS MQ Examples.

CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

Источник