We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
7 days, left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Website Setup and CSS
Posted on 2013-01-04
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.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3
2-
2
- +1
8 Comments
Active today
Very generally, the use of percentages are recommended in order to fit several screen sizes.
Developers don't agree if it's better to have only one site for all devices or several sites each for one device. Foundamentally, to have only one site makes mutch easier to mantain the site but probably it will oblige you to give up something in design and layout. To have one site for each device allows to always do the best for that device (and its user) but can make tha maintenance a hell.
You can learn more about responsive design here: http://www.9lessons.info/2012/12/responsive-web-design-css3.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+9lesson+%289lessons%29
Surfing the web, you can find many framworks to design flexible layouts using grids: https://www.google.it/search?q=css+grid&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:it:official&client=firefox-a
Cheers
Developers don't agree if it's better to have only one site for all devices or several sites each for one device. Foundamentally, to have only one site makes mutch easier to mantain the site but probably it will oblige you to give up something in design and layout. To have one site for each device allows to always do the best for that device (and its user) but can make tha maintenance a hell.
You can learn more about responsive design here: http://www.9lessons.info/2012/12/responsive-web-design-css3.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+9lesson+%289lessons%29
Surfing the web, you can find many framworks to design flexible layouts using grids: https://www.google.it/search?q=css+grid&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:it:official&client=firefox-a
Cheers
Active 1 day ago
@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.
Active today
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
Active 1 day ago
@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?
Active today
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/
Active 1 day ago
... 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.
Featured Post
You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Introduction
This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html). It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS
Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month7 days, left to enroll
724 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.