If I opened this on a screen 800px wide, would both the small and big jpg be loaded? or is the browser intelligent enough to ignore the smaller image?
#media screen and (min-width: 480px) {
div {
background-image: url(images/small.jpg);
}
}
#media screen and (min-width: 600px) {
div {
background-image: url(images/big.jpg);
}
}
Since both media queries will be fulfilled and both rules use the same selector, the second div rule will take precedence, and only big.jpg will be loaded for any div. Once you resize the browser window until the second rule no longer applies, it should go ahead and load small.jpg.
I made a quick test page with your CSS. Firebug's Net panel verified that big.jpg was being loaded at my usual browser size, and small.jpg only loaded once I made my browser window narrow enough.
Related
My CSS styles which responsive for small screens don;t appear when i inspect the web page and make it a small screen. It just appear for milli seconds and then vanished.
#media(max-width:700px){
.text-box h1{
font-size:20px;
}
i'm just watching a youtube video and trying to make this web side. In the video it does appear in small screens when he inspect the web page as a side menu.
From the solution that answers the question about the difference between only screen and screen, these are the points:
#media(max-width:700px) { ... }
Styles are applied for a window with a max width of 700px.
#media screen and (max-width: 700px) { ... }
Styles are applied for a window and a screen with a max width of 700px.
As the inspector can vary the screen size, the difference can't been seen, whereas if you resize your window, the changes are visible.
Trying to set the appropriate (meaning media query for the background header image in which will display the header image as it should be) of the website careertechpa.org. As you might see in the image attached, on the larger desktop screens, the bottom is getting cut off.
oversized-background
Here's the code for the header image:
.header-one{ height:200px;
background-image: url('careertechpa.org/wp-content/uploads/2020/02/…);
background-size:102%; }
I tried setting this media query but it didn't seem to work.
#media only screen and (min-width: 1440px) {
/* styles for MacBook Pro-sized screens and larger */
}
What am I missing?
I'm building a responsive website. There's a separate set of CSS to apply for smartphones. To do this, I use the following code
#media all and (min-width: 760px) {
.wrap {
/*css for large screens goes here*/
}
}
#media not all and (min-width: 760px) {
.wrap {
/*css for small screens goes here*/
}
}
My smartphone has a "Screen Resolution: 1080 x 1920." but it still displays the CSS for small screens. I'm surprised this is happening because 1080 > 760 so shouldn't the first block apply? Is screen resolution not actually measured in pixels? If not, then how does one find how many pixels in a screen?
I just found 760px from an example, is there a better way to decide when to switch from full size web page to compact for small screens?
There are two different concepts: the physical pixels of the screen, and the CSS pixels.
Initially, they were in most cases the same, but with so-called “retina” or “hidpi” screens, they are no longer the same. The idea is that a CSS pixel should retain about the same size, and be independent from the actual number of pixels on the screen: you don’t want to have text with CSS font-size 12px to have different sizes on screens with the same dimensions because their pixel density changes.
So the 1080 pixel width of your phone is probably mapped to 360 CSS pixels (x3 pixel ratio).
Instead of this
#media not all and (min-width: 760px) {
use this
#media all and (max-width: 759px) {
to address all viewports below 760 width.
ADDITION, answering the question in the comment "I'm asking what does px mean since it doesn't seem to be the physical pixel count on the screen":
It used to be the pixel count on the screen before retina and similar displays were introduced, which had a multiple amount of device pixels (AKA device pixel ratio, between 1.5 to 3 time as much).
Still, when those came up, the size reference for one "CSS pixel" remained the same (i.e. one CSS pixel would be 2 device pixels on a device with a device pixel ratio of 2), otherwise all websites would be displayed at half the size on these devices. So the pixel unit used in CSS refers to "CSS pixels" not to "device pixels" unless otherwise stated (which is only possible in media queries).
Go to development tools of your browser and select body tag and after that, you will find width and height by this:
due to some CSS issue this may not work properly will be great if you create a simple HTML with the following data to get width and height:
Change your media query with this.
#media only screen and (min-width: 760px) {
// for screens above 760px
.wrap {
color: blue;
}
}
#media only screen and (max-width: 760px) {
// for screens below 760px
.wrap {
color: lightblue;
}
}
If you want to change designing based on screen size then apply only screen with your media query.
Ask for more queries.
Thanks.
I want to make a media query to target just my phone. What breakpoint(s) would I use?
For instance, my body max-width is 800px wide with 2px margins. When the window is less than 800px (mobile?) i want the margins on it to be 0px (this works on my browser). Turns out that my phones screen is hi-res and therefore the width of the display never goes below 800px!
Is this because of pixel ratios?
What do I do?
The meta-view-port tag changes how websites are displayed on your phone, or other small screens that may want to 'adjust' a website for you.
Some screens, for instance - an iphone 5 - with no meta-view-port tag, will size the website to fit your screen / but like a little version of your website zoomed out. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A combination of a view-port tag, and a media-query in your styles would allow you to change your style rules depending on the screen-size. It's kinda best just to make the breaks where things get ugly and not based on the screen sizes of "Today" that will change next month.
I would suggest building from the smallest screen first and moving up as you go with styles like this:
html {
height: 100%;
background: blue;
}
#media (min-width: 400px) {
html {
background: red;
}
}
#media (min-width: 850px) {
html {
background: green;
}
}
etc.
https://jsfiddle.net/5qhmrym5/
If you already have your site built.. and you really want to target the smaller screens, you can use max-width instead of min-width - but I've found that it takes more time and energy to override styles on the way down - then it does on the way up because styles get more complex for larger screens.
#media (max-width: 850px) {
/* styles */
}
If what you want to change is margin value when viewed on mobile you should design your display for use on any screen above the mobile size, 800px wide for you, then create a media query, similar to the ones in the link commented by #Hynes, which changes just margins to 0px.
You are correct in assuming your device is 800px wide due to ratios, but it also has to do with resolution, which are similar topics here. If you imagine a sports jumbo screen, a pixel is nearly an led in size, vs a 1080px display laptop, where the pixels are nearly unobservable. Ratios and resolutions are the reasons displays are tricky to make, and why values such as em's and percentages have come to be, to bypass the differences in display. This is also a large reason of why media queries are so useful
html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
Try using box-sizing: border-box on your css and also percentages, this is the way I like it, but surely you will find plenty of information about it, just google it.
Found the solution: https://stackoverflow.com/a/18500871/5906166
You need to include this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation:
Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.
I am trying to align a bottom bar that is in homepage footer of my website. I want to adjust it so it will look good on common screen resolutions.
I have an issue with these resolutions 1280x960 and 1280x1024
#media only screen and (max-width:1280px) and (max-height:960px){
.tp-caption.black, .black {
margin-top: 496px!important;
}
And then use this code after that
#media only screen and (max-width:1280px) and (min-height:961px){
.tp-caption.black, .black {
margin-top: 464px!important;
}
The issue is it uses the same css, for both resolutions. 1280x960 media query
also applied in 1280x1024 resolution.
It displays the 2nd media query css code in browser, but ignores it and take
the above query.
I want to set the margin for both resolutions, for both heights 960 & 1024.
Can someone please explain me how to fix this?
Tried the same in fiddle, this works fine.
jsfiddle.net/5wx9qqyq/3/
One possible cause can be, missing closing braces for
#media only screen and (max-width:1280px) and (max-height:960px){ }
Please verify.