CSS @media query - standard devices: Difference between revisions

From WikiMLT
VisualWikitext
mNo edit summary
mNo edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude><!--[[Category:HTML_and_CSS|?]]-->{{ContentArticleHeader/HTML_and_CSS}}</noinclude>
<noinclude>{{ContentArticleHeader/HTML_and_CSS|toc=off}}
== References ==
{{ContentArticleHeader/UX_and_UI}}</noinclude>


* [https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ Media queries for common device breakpoints]
'''''Source of the article: [https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ Media queries for common device breakpoints].'''''
----


The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.
The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.
Before you start copying and pasting below, read why you don’t need device specific viewports. If you’re looking for details on the iWatch we’ve got you covered with getting your website ready for apply watch.
Before you start copying and pasting below, read why you don’t need device specific viewports. If you’re looking for details on the iWatch we’ve got you covered with getting your website ready for apply watch.
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
/* Smartphones (portrait and landscape) ----------- */
/* Smartphones (portrait and landscape) ----------- */
Line 140: Line 137:
}
}
</syntaxhighlight>
</syntaxhighlight>
<noinclude>
<noinclude>
<div id='devStage'>
<div id='devStage'>
{{devStage  
{{devStage  
  | Прндл  = HTML and CSS
  | Прндл  = HTML and CSS
  | Стадий = 3
| Прндл1 = UX and UI
  | Фаза  = Разработване
  | Стадий = 6
  | Статус = Разработван
  | Фаза  = Утвърждаване
  | Статус = Утвърден
  | ИдтПт  = Spas
  | ИдтПт  = Spas
  | РзбПт  = {{REVISIONUSER}}
  | РзбПт = Spas
| АвтПт  = Spas
| УтвПт = {{REVISIONUSER}}
  | ИдтДт  = 1.08.2022
  | ИдтДт  = 1.08.2022
  | РзбДт  = {{Today}}
  | РзбДт = 1.08.2022
| АвтДт  = 1.08.2022
| УтвДт = {{Today}}
  | ИдтРв  = [[Special:Permalink/29669|29669]]
  | ИдтРв  = [[Special:Permalink/29669|29669]]
  | РзбРв  = {{REVISIONID}}
  | РзбРв = [[Special:Permalink/29676|29676]]
| АвтРв  = [[Special:Permalink/29678|29678]]
| УтвРв = {{REVISIONID}}
}}
}}
</div>
</div>
</noinclude>
</noinclude>

Latest revision as of 19:45, 2 August 2022

HTML and CSS
UX and UI

Source of the ar­ti­cle: Me­dia queries for com­mon de­vice break­points.

The @media query is 1/3 of the recipe for re­spon­sive de­sign. It is the key in­gre­di­ent that, in it’s sim­plest form, al­lows spec­i­fied CSS to be ap­plied de­pend­ing on the de­vice and whether it match­es the me­dia query cri­te­ria. Be­fore you start copy­ing and past­ing be­low, read why you don’t need de­vice spe­cif­ic view­ports. If you’re look­ing for de­tails on the iWatch we’ve got you cov­ered with get­ting your web­site ready for ap­ply watch. 

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Retrieved from "https://wiki.metalevel.tech/index.php?title=CSS_@media_query_-_standard_devices&oldid=29808"