I want to make sure a HTML element (in this case an input box) maintains the 'optimal' width on different screen resolutions.
My subjective rules (for simplicity: ignoring the need for margins):
Initially set the width of the element to 40% of the window width
If the size of the element drops below a certain width (eg. 200 pixels), keep that minimum width
If the element won't fit on screen (in this example: window width is smaller then 200 pixels), set the width of the element to the window width
Can this be achieved using pure CSS (and still support IE8)?
As others have said, you can use media queries, here is a working example for your requirements.
input {
width:40%;
min-width:200px;
}
#media (max-width: 200px) {
input {
width:100%;
min-width: 0;
}
}
http://jsfiddle.net/bEvUZ/
.input_box {
width: 40%;
}
#media (max-width:500px) { /* 40% of 500px is 200px */
.input_box {
width: 200px;
}
}
#media (max-width:200px) { /* full width when the screen is smaller than 200 px */
.input_box {
width: 100%;
}
}
EDIT: Working example here http://jsfiddle.net/PXYRN/ and https://code.google.com/p/css3-mediaqueries-js/ for IE8 Support
Yes,
There are multiple ways to do that.
You can use media queries, flexboxes, and also play with box-sizing.
In your case, media queries are exactly what you need.
It's called "Responsive design".
Ex :
#media screen and (max-width: 640px) {
.bloc {
width : 40%;
}
}
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Related
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).
http://www.apple.com/sg/
there is a giant image that will autosize such that it is always approximately 75% of the window height.
How is this done?
I found a css media query, but I can only discover this one:
#media only screen and (max-width: 1068px), only screen and (max-height: 800px) {
.page-home .billboard.evergreen {
height: 50%;
min-height: 630px;
}
}
How do I find out about the other media queries for different resolutions?
The easiest way will be:
.item
{
height: 75vh;
background-color: blue;
}
<div class="item"></div>
These are so called viewport units. They are supported pretty good.
You may also try to utilize vmax for this use case. This will always hold the larger value of vw or vh.
I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.
How do I achieve this?
You are probally looking for
min-width: 800px;
If the width gets under 800px now the div wont resize smaller and just stay at this width.
Just make sure you add a media query like this:
div{
width: 60%;
}
#media (min-width: 601px) {
div{
min-width: 800px;
}
}
#media (max-width: 600px) {
div{
min-width: 400px;
}
}
Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries
ex:
/* Small Mobile Devices ( < 768px ) Style Begin */
#media (min-width: 0px) and (max-width: 767px) {
.div-elements-name {
width:100%;
}
}
I am designing a responsive web site. For that web site i am using a div "two". "Two" css is
#two {
overflow:hidden;
min-height: 85px;
margin-left: 22%;
}
and responsive css is like fallows
#media screen and (max-width: 400px) {
#two{
//empty field
}
}
when decreasing the browser window, normal css is loading instead of "media screen and (max-width: 400px)"
That's behaving as it should be, you have a definition for the ID 2, then if the width is less than 400 pixels you have a second empty definition. So imagine taking out your media clause and you just have this.
#two {
overflow:hidden;
min-height: 85px;
margin-left: 22%;
}
#two{
//empty field
}
That's what CSS is active when you have a screen with less than 400 pixels, you could wrap your first definition in an media query to only apply if the screen is larger than 400 pixels, or override each property you set in the first #two block, in the second one inside the media query.
I have a div (content area) with an image background, now if the div height extends to more than 600px I would like to display a different background image. Is that possible with just CSS?
here is an example i am giving, try changing the height of the result window to see the change:
.facet_sidebar{
background: url('http://www.hexaware.com/brandresourcecenter/images/images_compass.png');
height: 100px;
width: 100px;
}
#media (max-height: 600px) {
.facet_sidebar {
background: url('http://www.hexaware.com/brandresourcecenter/images/images_gears.png');
width: 100px;
}
}
jsfiddle demo
Media queries can be used to change anything.
Hope it helps
Simple answer: No.
More complex answer: It depends. For example you could set the height of the div-container relative to the height of the viewport and resize that. At some point the div will grow to a height > 600px. You could then watch out for the height of the viewport and base a media-query on the value.
#media (min-height: viewport-height when div is 601px high)
your styles {}
}
If that solution is not what you are looking for, then you have the option of looking for the height of the div with JavaScript and thereby swap the background image.
yes it is possible through the media inquiry
#media screen and (max-device-width: 768px) {
.div {
width: 960px;
background: url(...);
}
}