I'm creating ionic 4 angular app, and written media queries for IPhones. I'm write Iphone x and Iphone 6,7,8 plus media queries but Iphone x media queries also apply on Iphone x as well as Iphone plus.how to differentiate to each other ? Below shown media queries i'm using.
/* iphone 6+, 6s+, 7+, 8+ */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {}
/* iphone X */
#media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3){}
Because these not correct probably.
You are using -width on one and -height on the other so these media queries are not clamped exclusively.
I'm assuming the iPhone X is the biggest device but you are applying the rules from width 375px upwards... that's going to include ones that have width 414px and upwards.
It seems like this should cover all the iPhone scenarios:
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
You can get even more devices at:
Media Queries for Standard Devices | CSS-Tricks
Platform Mode
Also, don't forget that Ionic lets you use the ios selector in the sass to restrict the devices to ios mode:
Overriding Mode Styles - Platform Styles - Ionic Documentation
So something like:
.ios ion-badge {
text-transform: uppercase;
}
Will restyle everything with the mode="ios" set, which is done by default on ios devices, although it can be manually set to other values, so only use it if that's appropriate for your project.
Related
I build a website using bootstrap & its work properly in every mobile view, but in "320px" resolution when i rotted my mobile view the responsive view is not work properly, please give some advice how to fix it.
use media-queries and set max-width to 320px
#media (max-width: 320px){
//write css code here
}
Extra small devices (phones, 600px and down)
#media only screen and (max-width: 600px) {...}
Small devices (portrait tablets and large phones, 600px and up)
#media only screen and (min-width: 600px) {...}
Medium devices (landscape tablets, 768px and up)
#media only screen and (min-width: 768px) {...}
Large devices (laptops/desktops, 992px and up)
#media only screen and (min-width: 992px) {...}
Extra large devices (large laptops and desktops, 1200px and up)
#media only screen and (min-width: 1200px) {...}
When I refresh my website on the phone my responsive design (menu bar) is not working. Not working like disappears... It's just gone.
Only menu bar.
So here is my media query code:
#media all and (max-width: 800px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: black;
}
}
Maybe I should add JavaScript?
Help!!
It's the display none on line 224 in your css code. Remove it and you should be good.
#cssmenu > ul {
display: none;
}
Must the Twitter Bootstrap breakpoints for media queries be used top down or bottom up and when to define max-width definitions - before or after the min-width definitions? I seem to not get the answer from the tb-stylesheet. When using these breakpoints with my own stylesheets it appears the ordering matters because i encouter definition extinctions or ignorance.
I required to take care for device withs < 768 (which is the last breakpoint for *-xs definitions). I must take care for withs 320px, 480px and 600px and am trying to construct a reliable processing order. These are my current definitions which appear to override each other at some point.
/* lg and up */
#media (min-width: 1200px)
/* md only */
#media (min-width: 992px) and (max-width: 1199px)
/* md and up */
#media (min-width: 992px)
/* sm only */
#media (min-width: 768px) and (max-width: 991px)
/* sm and up */
#media screen and (min-width: 768px)
/* xs only */
#media (min-width: 767px)
#media screen and (min-width: 480px) and (max-width: 767px)
/* e.g. iPhone 5 landscape */
#media screen and (min-width: 568px)
/* e.g. iPhone 4 landscape */
#media screen and (min-width: 480px)
/* e.g. iPhone 4 portrait */
#media screen and (min-width: 320px)
#media screen and (max-width: 320px)
/* e.g. Blackberry */
#media screen and (max-width: 349px)
#media screen and (max-width: 479px)
#media screen and (max-width: 567px)
#media screen and (max-width: 991px)
Somebody can clarify the correct order to prevent definition extinction?
CSS cascade rules apply to media queries so, if you want to override a rule with a media query, you need to make sure that the media query contains a rule with the identical selectors (or selectors with more specificity) and that it is loaded after the rule you want to override.
Same applies when you have multiple media queries. The cascade order along with rules for specificity and inheritance will dictate whether the media query is applied. Take for example:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
Each of the selectors above are identical so they have the same specificity, but because of the cascade order, the background will never be the tomato color. If the body is 600 or more pixel wide, the rule for making the background tomato will be overridden by the last rule which also applies because 600px is also wider than 400px.
If you reorder the rules as follows:
body {
background-color: teal;
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
Now, the body background will be teal, when the body is less than 400px wide. It will be yellowgreen when the body is 400px - 599px and it will be tomato, when the background is 600px wide or greater.
Of course, you can use max-width too. For example, if you had the following order, the limit on the width at 599px for the yellowgreen rule would ensure that that rule didn't apply once the body was 600px or more:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) and (max-width: 599px) {
body {
background-color: yellowgreen;
}
}
So, for the TL;DR version, think mobile first. Organize your stylesheets with your base styles define for your smallest devices. Then order your media queries from the next smallest device sizes and up such that the largest devices you want to support are last.
And, don't forget to make sure that the rules in your media queries use selectors are identical to or have more specificity than the rule you want to override.
Are media queries still compilant to manage the ui on different devices or something else is used now ? If so could someone help me with some good resources to learn them ?
Thank you !
These are some common media queries for standard devices.
/* 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 */
}
It also helps a lot to find your target by taking a look at stats.
If you want to test some device physically you can check here.
Media queries are used very frequently in (and some would say one of the foundations of) responsive design for determining screen size break points.
Consider the following resources:
http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/
http://alistapart.com/topic/responsive-design
http://designmodo.com/responsive-design-examples/
http://mediaqueri.es/
An example:
<style>
#media (min-width: 500px) {
.my_div{
display: none;
}
}
#media (min-width: 501px) and (max-width: 1199px) {
.my_div {
display: block;
width: 200px;
}
}
#media (min-width: 1200px) {
.my_div {
display: block;
width: 400px;
}
}
</style>
this works for video, not for the images. do you know some better query?
#media (max-device-width: 1024px)
and (min-device-width: 600px)
and (orientation: landscape) { ... }
If you want video, images, other media to behave responsively you will need to add in
video, embed, object, iframe, img {
width: 100%;
max-width: 100%;
}
Also to ensure that your video sizes proportionally you should check out http://fitvidsjs.com/