I recently made new HTML document in my computer. When I share it with other comp. which has small size monitor then everything is messed!!!
I just wanted to know if I can make a code which changes the width of the items in webpage according to device width...
Then afterwards I thought to use % in width instead of pixels (px). It worked but not how I wanted it . So I still need help...
Thank you!
What you're looking for is media queries. Using media queries you can style your page using CSS based on the page max/min width.
Take a look at this for further info.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Here is an example when a screen has a max-width of 900px and when that is applied the following CSS will be applied. Anything outside of that range will have the above CSS applied
.example {
font-size: 7rem;
width: 75%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
width: 50%;
}
}
A website designed to change its contents according to how big (or small) the monitor or screen is designed with Responsive Design principles in mind.
Responsive designs can be achieved with CSS media queries. Check out the MDN documentation on Responsive Design here.
There was a question related to this one a long time ago, but which was never responded to or resolved.
I am developing a web site that has distinct screen layouts, which depend upon the width of the viewport/window.
#media (min-width: 1120px) { }
/* behaviour as expected */
#media (min-width: 720px) and (max-width: 1119px) { }
/* inconsistent behaviour in Firefox and Edge, mixing elements of above and below */
#media (max-width: 719px) { }
In my browser of preference, Chrome, the layouts transition perfectly from the largest screen width to the smallest. The same is true of Opera. However, both Firefox and Edge demonstrate a strange behaviour whereby a single transitional width (of one pixel) causes the browser not to know how to interpret the content.
For example, as the window transitions to the narrowest media width, the title bar becomes narrower, no longer being required to accommodate the main menu, and the menu is hidden (display: none;) and replaced by a small menu icon at the side, which leads to a drop down on hover. But in Firefox and Edge, the main menu is not hidden, but instead crammed beside the logo until the window is collapsed one pixel further, after which the behaviour is as expected. These CSS changes are all under the same #media declaration!
Interestingly, the behaviour is not consistent. That is, the transition from the largest to the middle width is flawless, but the transition from the middle to the smallest is problematic.
Assuming that it was an issue with fractional size calculations, I added high precision to my #media query like this:
#media (max-width: 719.999px)
And again, the behaviour was inconsistent. If I adjusted the lower value up (i.e. 719px to 719.999px) there was no change. However, if I instead adjusted the higher value down (i.e. 720px to 719.001px) the problem was partially solved. Certain elements displayed expected behaviour, but again, other anomalies persisted. Similarly, the higher precision worked on Firefox but not Edge.
It seems probable, given the behaviour that I am seeing, that certain boundaries might cause problems, whilst others would not.
Is this just a known bug that web site developers have learnt to accept, or might there be an easy solution (other than simply selecting a different set of boundaries)?
It's difficult to give a specific answer without seeing what you are seeing, but it's possible that the browsers are handling the transition from one media query to the next in different ways discussed below.
Most Likely Cause: Windows Display Settings
I assume you are using Windows when you mention Edge, I suspect this might be because you have changed the scale of your display in Windows - Display Settings. If this is set to 125% for example, this can have an affect on all aspects of your display.
So really this isn't a bug with the media queries, so much as a discrepancy caused by the browsers not effectively handling the scaling by Windows Display settings.
UPDATE - Now that you have confirmed that you can stop on a particular point where this happens, then I'm pretty confident this is the cause. In my testing yesterday when looking into this, I was able to reproduce that behaviour when the display was scaled.
Using the following test case with original styling of an empty block with a red border, and different CSS applied at (max-width: 1119px) and (min-width: 1120px), the issue happens only when the display is scaled.
body{ margin:50px 0 0 0;}
.test {
border: 10px solid #f00;
height: 10px;
}
#media (min-width: 1120px) {
.test {
background: #ff0;
height: 500px
}
}
#media (min-width: 720px) and (max-width: 1119px) {
.test {
margin-left: 300px;
background: #0FF;
height: 200px
}
}
#media (min-width: 460px) and (max-width: 719px) {
.test {
margin-left: 300px;
background: #00f;
height: 200px
}
}
#media (max-width: 460px) {
.test {
background: #ff0;
height: 100px
}
}
<div class="test"></div>
Firefox, using Dev Console ruler to show window size:
Display Scale: 100% (i.e. no scaling) at 1119px width - CSS works as expected*
#media (min-width: 720px) and (max-width: 1119px) {
.test { margin-left: 300px; background: #0FF; height: 200px }
}
Display Scale 125% at 1119px width - no CSS media query applied, so CSS reverts to original
.test { border: 10px solid #f00; height: 10px; }
Possible Reason for the "glitch"
If the above is the case (or even if it isn't), I suspect your next question is why is it happening. Only the developers can answer that, but thinking logically we can come up with the reasoning below.
What are media queries meant to do?
First, we need to look at the purpose of media queries. According to the W3C CSS3 Media Queries recommendation:
The ‘width’ media feature describes the width of the targeted display area of the output device.
From this, we can assume they were intended for selecting the CSS to use depending on the media query that matches the screen/window size. Screen size can't have fractional pixels (e.g. 719.5px) and points between the whole pixels can only "exist" while the screen is being resized, and media queries are not intended to cover such temporary transitions.
OK, that's the why it isn't necessarily a "bug" and why it isn't always handled well in browsers, now...
What is causing this issue to happen during transitions?
If you have changed the scale, the browser has to recalculate the all the sizes to scale them up/down also. This "glitch" in the transition is most likely being caused by these calculations resulting in fractions of pixels. (If you haven't changed the scale, the same logic actually still applies)
It appears the browsers such as Chrome have been build to handle the recalculations/ size change in whole pixels, so the display will jump from the CSS applied by (e.g.) max-width:719px media query to the CSS for min-width:720px.
However other browsers such as Firefox don't seem to work like this and try to calculate the display based on the fractional pixels. This means there can be instances where the recalculated/changing size fall between e.g. max-width:719px nor min-width:720px.
In this case it seems to change the display to whatever CSS applies at that point - if there is another media query overlapping those sizes that would be applied, but more likely the original CSS is getting applied. So what you are seeing in that transition you describe is your CSS that exists outside of the media queries, e.g. if your CSS is written for mobile-first then you are seeing the CSS for mobile version of the site.
What can we do to "fix" it?
Aside from changing back the scale to 100% (which isn't a feasible option because you can't ask all your visitors to do that!) I don't know if there is a reliable solution.
One option is to use decimal values in your media queries like you mentioned, e.g.
#media (min-width: 720px) and (max-width: 1119.999px) { /* CSS....*/ }
#media (max-width: 719.999px) { /* CSS....*/ }
Another is to try is to make sure that you have suitable styling in your original CSS that will be applied at the "in-between" points, e.g. 719px - 720px.
Firefox and Edge appear to calculate and store their view port widths as floating point numbers, and media queries are applied to those values rather than the whole-pixel widths that they represent. There is consequently a difference in the way in which the parameters of our media queries are interpreted.
So whilst Chrome and Opera transition between 720 pixels and 719 pixels seamlessly, the same transition on Firefox or Edge can result in the browsers' simply skipping over the query and applying whatever default styling is otherwise relevant.
My original solution was to apply a browser-specific #media query to account for values between the whole pixels.
#-moz-document url-prefix() /* Firefox */
{
#media only screen and (min-width: 719.000001px) and (max-width: 719.999999px)
{
However, the real problem was the way in which I was specifying the parameters of the media queries. Unlike in programming languages, in which we can (and should) define mathematical parameters with equality and inequality (e.g. -1 ≤ x ≤ 1), CSS employs a hierarchy. For example, if #media (max-width: 600px) is followed by #media (max-width: 400px), whilst the two are not logically exclusive, the latter query will take precedence over the former.
So my solution was to change the way in which the #media queries were structured, such that there were max-width declarations only. If we try to define upper and lower limits of each interval, we run into the aforementioned problems with the way that the distinct browsers interpret the limits.
You could avoid any requirement to set up specific decimals by having no gaps between your queries at all.
For example:
(min-width 1px) // Instead of (max-width: 719px)
(min-width 720px) // Instead of (min-width: 720px) and (max-width: 1119px)
(min-width 1120px ) // Instead of (min-width: 1120px)
Currently, you have a middle band with one 'max-width' band and one 'min-width' band either side of it.
The above alternative solution just uses 1 direction (min-width), so there are no gaps to contend with.
Or:
That solution assumes you don't want to develop your whole front-end style for sub-720px and then media-query every larger size.
If you did want to do that, you could always just use the following: (sure Google search SEO may love you, but you may hate it!)
(min-width 720px) // Instead of (min-width: 720px) and (max-width: 1119px)
(min-width 1120px ) // Instead of (min-width: 1120px)
You would then need to incorporate your code that you wanted to put in your max-width: 719px media query into your base ("non- media query") code.
Which one?
I'd use the first solution.
Based on the OP, that one would be more applicable in that situation too.
Actually, I wouldn't use the first solution. I'd code for, say, >1230px, and then use media queries that use max-width for the responsive steps below that.
im trying to style the page based on different phone sizes. I know that I can use media queries, but what if the width of the phone is the same, but height is different. For instance, both Iphone X and 6,7,8 has the same width, but different length
Pretty much what Carl said in his comment.
The following is a valid example:
#media only screen and (max-height: 600px) {
body {
background-color: lightblue;
}
}
To do that you should use media queries (as already mentioned).
Not only can you change stylistics according to screen max-width and max-height, but also to orientation: portrait and even aspect-ratio:.
Apart from that I think you could make css rules around the concept of relative units.
You can make whole content scalable
- not just
div { width: 20vw; }
but also
p { font-size: 5vmin; }
That way you won't need to worry about weird aspect ratios or different resolutions.
Q. What technique is the most efficient in terms of image load times and performance...?
Scenario 1.
Is it to load a different size image by using a media query, as below:
/* Smartphone */
#media screen and (max-width: 320px) {
.img-page-1-img {
background: url('../images/img-page-1-img-117.jpg') no-repeat;
width: 117px;
height: 77px;
}
}
/* Desktop */
#media only screen and (min-width: 769px) {
.img-page-1-img {
background: url('../images/img-page-1-img-234.jpg') no-repeat;
width: 234px;
height: 154px;
}
}
OR...
Scenario 2.
Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?
img {
max-width: 100%;
}
Thanks....
Perhaps, an even more appropriate and/or responsive approach is to combine both. Use second img as a fallback and use media queries with resolution to specify the image:
img { ...low-res source }
#media (min-resolution: 2dppx) {
img { ...hi-res source }
}
An agent that understands high-res may throw away first request and fetch hi-res image only; in the worst case there would be two requests. Everyone else will only fetch low-res source.
resolution is currently in W3 Candidate Recommendation
for responsive design we need to add this to get original image for large screens
img {
max-width: 100%;
}
and inside the media queries add like this
#media screen and (max-width: 320px) {
width:117px;
}
and dont set height. you just control the image with parent by setting
overflow:hidden; height:117px;
**
and better to avoid background-images in responsive design, if you are
using you should need 4 to 5 images for each set. Try to use img tag
**
Putting the different images in media queries won't work as some browsers will just preload all assets (even the ones that are no match for the current viewport).
See: http://www.nealgrosskopf.com/tech/thread.php?pid=73 for a nice overview.
I'd go for div's with data attributes that contain a reference to the image to load. Check window width (or use matchMedia) with javascript and create the image on the fly.
For images that are really important (content wise / need to be indexed) you could add a small version initially and replace it with a high resolution version if the window is wide enough (or media query is matched using matchmedia).
I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.
Is it possible using only CSS or I have to use some javascript as well?
What I need is something like [this][1]
Any help or advice will be highly appriciated
Thanks
What you want to do is to Responsive Design
For example you can make your css target a particular devise as:
//General css
/*MEDIA BETWEEN 300 - 1000PX */
#media all and (min-width:300px) and (max-width:1000px)
{
}
/*MEDIA BETWEEN 621 - 800PX */
#media all and (min-width:621px) and (max-width:800px)
{
}
/*MEDIA BETWEEN 300 - 620PX */
#media all and (min-width:300px) and (max-width:620px)
{
}
Some of the pages that can help are:
http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
NOTE: use em and % instead of px and pt
Just set relative widths on stuff, like width: 75%; or width: 60%; instead of width: 450px; or width: 650px;. This will work for you if you just need elements to get narrower/wider as the page is resized.
If you want major layout changes (like on the demo you provided, the top menu bar becomes a sidebar when the window becomes smaller), you'll need some Javascript to switch stylesheets based on the width of the window. Hope this gives you some ideas!
What you are talking about is called "Responsive Design".
A responsive site works more with percentages instead of pixels as well as something called "media-queries" in css.
There is a great article about it here:
http://www.alistapart.com/articles/responsive-web-design/