I'm working on a site and would like scale the contents to scale whenever the browser window is resized. Here's an example of what i'm trying to achieve. Go ahead and re-size the browser to see what i'm after. Can someone tell me how the author achieved this ? Or what this technique is called? I already have a good handle on CSS and know about liquid layouts but the technique used on this site is very distinct. I can't wrap my head around how he managed to scale many portions of the site, even the little picture on the side scales down. Can someone tell me how this is achieved ? I'm really after the concept or the name of the technique. Thanks.
It's known as Responsive Design, and there's a pretty good book on the subject.
In simplest terms, it's taking advantage of media queries to adapt your content for a range of resolutions.
/* targets screens matching the specific sizes */
#media screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* css rules here */
}
#media screen
and (min-device-width: 481px)
and (max-device-width: 960px) {
...
}
#media screen and (min-device-width: 961px) {
...
}
The sizes will all very based on how wide your content is and what kind of layout you're using so you'll have to target specific sizes that best fit your needs. Of course there's more to it than that, but there's plenty of resources and tutorials out there.
Here's a link from "A List Apart". They use fluid grids and media queries to make sure the content sizes with the window. The article has code to so you can see what's going on.
i think it's this line that does it, because I checked his css and javascript functions and there's nothing there. Try it out and see if it works.
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">
Related
as usually happens I have responsive navigation div. So I want to write CSS for it to have position fixed only on mobile devices. How do I do it ?
You can use CSS Media Query.
Here You can find more information:
Using media query
An example for your case:
#media only screen and (max-width: 40em) and (orientation: portrait){ // your code}
I can't really give an example because you have been extremely vague in your question, but you can use css media queries to change styles for mobiles. You can set the maximum width for which to apply those styles to, meaning that anything smaller than that width will use those styles. (There are also loads of other options for media queries like aspect ratio; you can see more of them here, as well as how to use them).
Here is a very basic example of a media query you can use:
#media only screen and (min-width: 480px) {
/* Styles here */
}
You can read more about them at these sites:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Common CSS Media Queries Break Points
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints
[There are many more, just google it and you will find countless tutorials and examples.]
I need to do a respponsive website project and Im with some doubts.
Im studying media queries but there are a lot of media queries, there are something like "default media queries" or "common media queries" that we can follow?
After some research Im thinking something about this:
#media only screen and (min-width: 480px) { ... }
#media only screen and (min-width: 600px) { ... }
#media only screen and (min-width: 768px) { ... }
#media only screen and (min-width: 992px) { ... }
#media only screen and (min-width: 1382px) { ... }
Do you think that are a good approach using this media queries?
And do for responsiv design do you think its better use percentages in css or its better using pixels? Im asking this, because the media queries use pixels, so maybe its better dont use percentages?
And for last, I have a computer with full hd resolution and other with 1024 resolution. I have a image that have 300 pixels, in my full hd monitor the image is more smaller than my 1024 computer. I dont understand this, because 300pixels should be 300 pixels always no?
Sorry if I ask many things, but Im with some doubts and its not easy find good and reliable information about this!
I thnk using the media query settings you note will complicate your life because they will make it difficult to target different viewports or window widths.
#media only screen and (min-width: 480px) { ... } will target all widths 480px and above,
#media only screen and (min-width: 600px) { ... } will target all widths 600px and above.
So they will both be fighting for control whenever the viewport is 600px or higher. You could consider something like the following:
/* your default, site-wide settings followed by */
#media only screen and (max-width: 480px) { ... }
#media only screen and (min-width: 481px) and (max-width: 600px) { ... }
#media only screen and (min-width: 601px) and (max-width: 768px) { ... }
#media only screen and (min-width: 769px) and (max-width: 992px) { ... }
#media only screen and (min-width: 993px) { ... }
I'm not saying that these are perfect break points, that's often specific to your design. The important bit is the technique you use to target the different viewports.
There are different schools of thought for pixels vs percentages, and both have advantages. If you are getting up-to-speed with responsive design, personally I think it's worth spending time with some of the well established frameworks like Bootstrap or Foundation or Skeleton or one of the many others.
They are all fantastic, they will save you heaps of learning time, give you good cross-browser results, and the more you know, the easier it will be to break away from them when needed.
Good luck!
What's pixel density and how it can help me to understand why the same image can be smaller on my mobile phone than it is on my computer monitor (and vice-versa)?
Let's say that I have a monitor with a 500 x 500 pixels resolution, the screen size of this monitor is 15" diagonally and I have a mobile phone that has the same resolution but it's screen size is 4" diagonally (just an example).
How is it possible to fit the same number of pixels in different screen sizes?
The answer is simple: The pixel is smaller on my phone than it is on my monitor (that's the big difference between Apple's retina display and other displays).
Media Queries...
Take a look in a very simple blog that I've developed last year. Try resizing your browser width to see what happens to the content, images and slideshow.
When the browser/screen width is smaller than 800 pixels, the entire site changes to adapt itself better to smaller screens. This is how I think you should use media queries, instead of creating rules for each device screen size (but not necessarily using 800px nor limiting the content max-width when it's on a big screen).
Note that this is just an example on how you should think about media queries.
here is some reference for you:
about media queries you can read http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/ - i love this quote
Start with the small screen first, then expand until it looks like
shit. Time for a breakpoint! -Stephen Hay
basically you should use a fluid layout (you can choose from a variety of css fluid grids you find online) and test your design enlarging and shrinking your browser: when your design "cracks", it's time to add a mediaquery. you don't have readapt the whole website at a certain breakpoint: everything may work ok and you need only to resize the text at that certain width. do so.
about pixel density and resolutionyou can read this useful article: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
hope this helps
You should probably stop thinking about the web in pixels and screen sizes.
I can see why it's tempting to use actual device widths as breakpoints for a design, but do keep in mind that those breakpoints will be invalid the very second a new device is released. Or when the user interacts with the site in an unexpected way, such as resizing the text size to their preference.
Use the em unit for your breakpoints. This way, your media queries will trigger correctly even when a user resizes the text size.
Adjust your breakpoints to when your content/layout needs it, not for for specific screen sizes (that said, you should probably not include compact (mobile) navigation above 980-ish pixels, since people with old monitors probably won't understand how to navigate through it).
Write mobile first CSS, as in use min-width for your media queries. This helps you keep your CSS DRY. However that does not mean that you never should use max-width for media queries - there are always scenarios when you want to add styles to smaller screens only. Always avoid repetition.
For your own sanity, use a CSS preprocessor such as SASS, LESS or Stylus. I recently wrote an answer on how to use SASS to get a really comfortable workflow with media queries, click here here to read it.
Pixel density is a complicated topic, but rendered pixels (such as an image, or anything with CSS) aren't the same as actual pixels on a screen - they're normalized to a standard. For that reason, you shouldn't use pixel density to increase the quality of images, you should just increase the width of the image since those additional pixels then will be crammed into place on higher resolution screens.
Pleas Try Following media queries:-
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
I have a situation here, i need to design a website and i am stuck on the question of working my webpage in some particular resolution.
I have used %age approach in my web page content and need to find a min-width/max-width on which i can have the whole web page or body to be restricted if it was a specific monitor to be looked on.
Our end-users are on following specs:
HP L1955
aspect ratio : 4:3
resolution : 1280*1024
Are there any calculations with above data to know the best fit?
Thanks in advance
If you want to change the styling of the web page based on a specific resolution of screen, you can use #media queries. Check this stackoverflow question out: What does #media screen and (max-width: 1024px) mean in CSS?
For example, if you wanted to specify some CSS code for a screen of 1024 or less, you could do this in your CSS file:
#media screen and (max-width: 1024px)
{
/* code here */
}
I've built a nice template that has four different layouts using #media queries:
850+px width
<850px width
iphone landscape
iphone portrait
It works awesome, until you size your monitor window down to below 480px (iphone landscape) and then it starts picking up the smaller size #media queries.
Is there any way to avoid this?
I personally feel like it's desirable to display the "iPhone" layout at smaller browser window sizes, as your content has likely been optimized for that layout, HOWEVER, if you really want to prevent this you can play around with the device-width property in your #media declaration. Something like #media only screen and (max-device-width: 720px) { ... } will target device width rather than viewport width. Compare the behavior of this (viewport width) vs this (device width). Play around with the values (change min to max, change the pixel sizes, etc.) and observe the behavior. Also, don't forget that you can combine #media rules, e.g. #media (min-width: 400px) and (max-width: 600px) { ... }. See what works for you.
The problem with this method is that mobile devices come in all shapes and sizes, so you might be serving undesirable styles on a different mobile device (let's just say an Android phone...) that you hadn't planned on. However, depending on your needs, this might not matter to you.
Here is a list of example media queries and sizes to guide you, if you do decide to go this route: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (sorry for the lack of a working link; apparently I'm not cool enough on StackOverflow to post multiple links yet)...
I just learned how to use CSS media queries to make my page fit the screen when the user re-sizes the window, or has a different screen resolution.
My page is designed so that the user won't have to scroll at all.
I want to make my page to fit on 1280px by 768px and 1280px by 960px screen resolution.
The problem is, the page gets all messed up when I have similar widths (1280px).
Could someone please assist me?
I greatly appreciate your help!
You can setup styles between specific dimmensions. For example, something like this:
#media(min-width:768px) and (max-width:979px){
<styles go here>
}
And then, anytime the viewport is between these two dimensions, your styles will adhere.
And I just realized how old this post is, but I'll go ahead and add it anyway in hopes it helps someone out.
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
You might wanna check out http://css-tricks.com/resolution-specific-stylesheets/
It's an excellent guide on how to create multiple stylesheets for different resolutions.