I want to add CSS style based on screen resolution instead of Viewport.
Here is the case:
My screen resolution is (1980px x 1080px) and if I set Windows 10 "Scale and Layout" to 125% it changes the viewport of the screen and shows that viewport style.
I want to show my media style based on screen resolution, not the viewport.
Currently, I am using these media query for large resolution:
// X-Large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
#media (min-width: 1400px) { ... }
Can we achieve this using only CSS not JS?
Screenshots:
Window 10 Scale 100% :
Viewport at Scale 100%:
Window 10 Scale 125% :
Viewport at Scale 125%:
To distinguish between changed scaling we need to look at pixel density. And the resolution media feature can be used for that:
/* used just for the demo*/
* {
margin: 0;
padding: 0;
}
/* your normal device specific media queries
#media (min-width: 1200px) {
...
}
#media (min-width: 1400px) {
...
} */
/***********************/
.nonscaling {
transform-origin: 0 0;
background-color: wheat;
width: fit-content;
}
/* scaling media queries */
/* 1. scale and layout setting at 100% */
#media (resolution: 1dppx) {
.scale::after {
content: '100%';
}
}
/* 2. scale and layout setting at 125% */
#media (resolution: 1.25dppx) {
.scale::after {
content: '125%';
}
.nonscaling {
/* offset the scaling */
/* factor = 100/125 percent */
transform: scale(0.80);
}
}
/* 3. scale and layout setting at 150% */
#media (resolution: 1.5dppx) {
.scale::after {
content: '150%';
}
.nonscaling {
transform: scale(0.6666);
}
}
/* 4. scale and layout setting at 175% */
#media (resolution: 1.75dppx) {
.scale::after {
content: '175%';
}
.nonscaling {
transform: scale(0.5714);
}
}
<div class="nonscaling">I will not scale! Period.</div>
<div class="scale">You've scaled: </div>
In windows settings change Scale and layout setting to 100%, 125%, 150%, or 175%. And see the effect here.
In above snippet we are using dppx unit you can use other units. To compensate the scaled elements we are using transform: scale(..) feature. You can use zoom but Firfox doesn't support it.
Note: you can apply transform:scale(..) to entire body tag to handle all content with one rule.Also, you can try combinations of min-resolution, max-resolution and min-width, max-width like #media (min-width:1200px) and (resolution: 1dppx).
Unfortunately, there's simply no way to dismiss the current display scaling settings and work with the resolution only, as it affects the viewport directly. However, you can utilize the following media query:
#media screen and (min-resolution: 125dpi) {
/* Your code here */
}
This affects the elements: a) when the display scaling is set to 125% and above, and b) when the zoom level in your browser is set to 125% or more.
Another good practise is to give max-width: 100%; to both the html and body tags of your website. This will prevent the various elements from reaching a size which positions them outside the visible viewport (unless of course they are positioned absolutely).
I wanna make my website responsive and all sizes correctly work, but the problem is when the screen is <420px they use the media query 992px information, not the 420px why ?
the problem is all classes work correctly in 420px but in this class, they take the 992px
#media (max-width: 420px) {
div.test {
width: 200px;
}
}
<div class="container test">
<img src="img/img.png">
</div>
It sounds like you're calling a max-width:992px media query after your max-width:420px media query is defined. Keep in mind CSS is compiled top-down, and your logic needs to accommodate this. Instead, consider your media query order:
#media (max-width:992px) {
...
}
#media (max-width:420px) {
...
}
The best practice is to build the site "mobile first", meaning the default values are for the mobile version, and then you can override width definitions using media queries.
So if you want 200px on 420px width, and 400px on 992px width, you should do something like:
.test {
width: 200px;
}
#media screen and (min-width: 992px) {
.test {
width: 400px;
}
}
Always use min-width and always start with the small resolution and override with bigger resolutions.
The Goal
The goal is to be make the grid system boxes amount per row change based on screen size. Here is an example
Screen Size Boxes Percent Width
1250px 3 33.3
750px 2 50
500px 1 100
Current Progress
I have created the grid system and the media queries
/* Max Width 1250px */
#media screen and (max-width: 1250px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media screen and (max-width: 750px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
The Problem
I current have the media queries that work at 750px and 500px however it skips the 1250px. Not sure what the difference between the 750px and the 1250px? Why it not working?
JSFiddle - https://jsfiddle.net/6k2Lkm2f/1/
I've had a similar problem before.
You should use both min-width and max-width to set lower and upper bounds respectively.
Also your first two are redundant. Both give the .boxes class a width of 50%. It would be better to combine them into one, that serves both viewpoints
/* Max Width 1250px */
#media only screen and (min-width: 501px) and (max-width: 1250px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Using the above syntax is a great way to prevent confusion.
Edit: Media queries only work on ie9 and above. If you are using an older browser, the above will NOT work.
Second Edit: It looks like in media queries you need to add only before the type. For example
#media only screen instead of #media screen
I have designed a page where four div tags are there in the page. If I test the page in mobile phone (5 inch) it fits the page perfectly, If I test the same page in tablet the page fits with in 30% of the screen. So how can I set the div size so that it will fit for all type of screens.
Fiddle link
HTML:
<div class="bubble0" align="center">
<h3>Three Levels </h3>
</div>
<div class="bubble" align="center"> </div><br/><br/>
<div class="bubble1" align="center"> </div><br/><br/>
<div class="bubble2" align="center"> </div><br/><br/>
<button>Play</button>
Any suggestions please,
This is called Responsive Web Development(RWD).
To make page responsive to all device we need to use some basic fundamental such as:-
1. Set the viewport meta tag in head:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
2.Use media queries.
Example:-
/* 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 */
}
/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
3. Or we can directly use RWD framework:-
Bootstrap
Foundation 3 etc.
Some of good Article
Media Queries for Standard Devices - BY CHRIS COYIER
CSS Media Dimensions
4. Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)
Below media queries for generic Device type: - Larger Device, Medium Devices & Small Devices.
This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.
/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
#media screen and (min-width: 1024px){
/*Style*/
}
/*###Tablet(medium)###*/
#media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}
/*### Smartphones (portrait and landscape)(small)### */
#media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}
You question is a bit unclear as to what you want, but judging from your comments, I assume you want each bubble to cover the screen, both vertically and horizontally. In that case, the vertical part is the tricky part.
As many others have answered, you first need to make sure that you are setting the viewport meta tag to trigger mobile devices to use their "ideal" viewport instead of the emulated "desktop width" viewport. The easiest and most fool proof version of this tag is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: PPK, probably the leading expert on how this stuff works. (See http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf).
Essentially, the above makes sure that media queries and CSS measurements correspond to the ideal display of a virtual "point" on any given device — instead of shrinking pages to work with non-optimized desktop layouts. You don't need to understand the details of it, but it's important.
Now that we have a correct (non-faked) mobile viewport to work with, adjusting to the height of the viewport is still a tricky subject. Generally, web pages are fine to expand vertically, but not horizontally. So when you set height: 100% on something, that measurement has to relate to something else. At the topmost level, this is the size of the HTML element. But when the HTML element is taller than the screen (and expands to contain the contents), your measurements in percentages will be screwed up.
Enter the vh unit: it works like percentages, but works in relation to the viewport, not the containing block. MDN info page here: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
Using that unit works just like you'd expect:
.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */
It works on a lot of browsers (IE9 and up, modern Firefox, Safari, Chrome, Opera etc) but not all (support info here: http://caniuse.com/#search=vh). The downside in the browsers where it does work is that there is a massive bug in iOS6-7 that makes this technique unusable for this very case (details here: https://github.com/scottjehl/Device-Bugs/issues/36). It will be fixed in iOS8 though.
Depending on the HTML structure of your project, you may get away with using height: 100% on each element that is supposed to be as tall as the screen, as long as the following conditions are met:
The element is a direct child element of <body>.
Both the html and body elements have a 100% height set.
I have used that technique in the past, but it was long ago and I'm not sure it works on most mobile devices. Try it and see.
The next choice is to use a JavaScript helper to resize your elements to fit the viewport. Either a polyfill fixing the vh issues or something else altogether. Sadly, not every layout is doable in CSS.
You can use the viewport height, just set the height of your div to height:100vh;, this will set the height of your div to the height of the viewport of the device, furthermore, if you want it to be exactly as your device screen, set the margin and padding to 0.
Plus, It will be a good idea to set the viewport meta tag:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
Please Note that this is relatively new and is not supported in IE8-, take a look at the support list before considering this approach (http://caniuse.com/#search=viewport).
Hope this helps.
I don't have much time and your jsfidle did not work right now.
But maybe this will help you getting started.
First of all you should avoid to put css in your html tags. Like align="center".
Put stuff like that in your css since it is much clearer and won't deprecate that fast.
If you want to design responsive layouts you should use media queries wich were introduced in css3 and are supported very well by now.
Example css:
#media screen and (min-width: 100px) and (max-width: 199px)
{
.button
{
width: 25px;
}
}
#media screen and (min-width: 200px) and (max-width: 299px)
{
.button
{
width: 50px;
}
}
You can use any css you want inside a media query.
http://www.w3.org/TR/css3-mediaqueries/
I use something like this in my document.ready
var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device
$("#container").width(width+"px");
$("#container").height(height+"px");
Fiddle
You want to set height which may set for all devices?
Decide upon the design of the site i.e Height on various devices.
Ex:
Height-100px for bubbles on device with -min-width: 700px.
Height-50px for bubbles on device with < 700px;
Have your css which has height 50px;
and add this media query
#media only screen and (min-width: 700px) {
/* Styles */
.bubble {
height: 100px;
margin: 20px;
}
.bubble:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble1 {
height: 100px;
margin: 20px;
}
.bubble1:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble1:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble2 {
height: 100px;
margin: 20px;
}
.bubble2:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble2:before {
top: 100px;
border-width: 52px 52px 0;
}
}
This will make your bubbles have Height of 100px on devices greater than 700px and a margin of 20px;
Whilst I was looking for my answer for the same question, I found this:
<img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">
You can use it inside a tag (iframe or img) the image will adjust based on it's device.
Try giving your divs a width of 100%.
Simple:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
Cheers!
I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}