Website Setup and CSS
What is the best way to setup a website to take into account the size of a users screen. Large apple 30 inch screens and small screen. Also mobile devises.
Should I use a different CSS for each? Should I only use percentage values in the CSS?
A little brief guidance here will be greatly appreciated.
Should I use a different CSS for each? Should I only use percentage values in the CSS?
A little brief guidance here will be greatly appreciated.
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
@margusG
For example, here is a wordpress theme: http://themes.themedizain.com/dizain-01/
If you decrease the size of your screen you will see the site respond but it will not respond if you make the screen bigger than normal.
What is the way to do this, pure CSS? How would I get the images to be larger?
For example, here is a wordpress theme: http://themes.themedizain.com/dizain-01/
If you decrease the size of your screen you will see the site respond but it will not respond if you make the screen bigger than normal.
What is the way to do this, pure CSS? How would I get the images to be larger?
It's called responsive layout or responsive web design, and you can find a lot of material including tutorial, examples & templates on the web.
A good starting point is Ethan Marcotte's article in A list apart.
Some frameworks like twitter bootstrap, already contain sets of css rules to meet different requirements by different devices.
A good starting point is Ethan Marcotte's article in A list apart.
Some frameworks like twitter bootstrap, already contain sets of css rules to meet different requirements by different devices.
You have to set the viewport to 100%. This will make your site occupie all the available space. Once you have set the body width to 100%, you'll can design your layout using percentages. Simply search through Google for responsive web design and/or responsive css
and you'll find tons of infos to realize your site.
Cheers
and you'll find tons of infos to realize your site.
Cheers
@Hagay and @ Marqus
What I'm really interested is how to make a background image stretch and shrink without causing it to pixelate?
@media 1140px
@media 768px
@media 480px
@media 300px
If you change to any of these the image should get bigger or small. How do you do that?
What I'm really interested is how to make a background image stretch and shrink without causing it to pixelate?
@media 1140px
@media 768px
@media 480px
@media 300px
If you change to any of these the image should get bigger or small. How do you do that?
I agree with HagayMandel. This is also the tecnique used by css responsive images.
Anyway you can find interesting this: http://viewportindustries.com/blog/automatic-responsive-images-in-wordpress/
Anyway you can find interesting this: http://viewportindustries.com/blog/automatic-responsive-images-in-wordpress/
... make a background image stretch and shrink without causing it to pixelate?The browser can shrink it for you. But you don't want the browser to enlarge it for you - the results will be visually ugly. Agree with HagayMandel - create different images for different sizes. You will get the best look and you'll save bandwidth and storage when you're working with smaller viewports.
PHP can interact with JavaScript to detect the size of the viewport. That may help you create a custom CSS document that loads the appropriate background images.
Join our community and discover your potential
Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.
*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.