How make a page fit on any screen with any orientation [closed]
I'm working on a web site than must be visible on any screen and any device, and I saw this site the other day.
Inspecting the page with the developer tools of google chrome and "emulating" the width and height of devices I saw that the page fits to any resolution and orientation.
I want to know how to get this without struggle too much with css.
Thanks in advance.
PS: Also I viewed the site from my phone a Samsung galaxy S3 Mini and it fits perfectly to the screen.
I am going to make this answer as helpful and to the point as I can:
You will need to spend a few hours reading all you can grab on responsive web design and development, only after that should you begin to explore the right tools to make your CSS life easier.
As you will find out, there are many techniques and CSS libraries for making responsive web design. A guideline I can give you is: You can learn to make your own responsive development, which in practice leads to leaner code and it will also helps you understand how more robust libraries do it (such as Bootstrap, among others).
- Learn and understand media queries.
- Learn about advanced CSS contepts such as mixins and how you can combine them with #1 to make your coding life easier.
- Learn all you can about grids and fluid grids, then look at (today's) modern concepts such as flexbox which will help you with your individual and global layout. Make sure you can do it yourself! (it's not a big challenge, take it one small step at a time, do some tutorials).
- Begin to dive into some neat CSS frameworks, such as Foundation, Bootstrap, Ionic Framework, among many others. It is imperative you take time to understand how they can help you, what they can do for you, extract only what you need (example: I only need to use the grid system), are they community driven? (it is important not to rely on obsolete tools).
- Last but definitely not least is cross browser compatibility: once you go deep enough in CSS you tend to forget to always use cross browser compatible techniques. This takes plenty of - do it yourself - research, but it is not terribly difficult, simply stick with what works for you and for your implementation.
So... only after you have done some reading, played with code and begin to find roadblocks, should you come back here and start asking as many questions as you like. That way we, the community, can assist you properly.
P.S.: Here is a little fun article to get you started: Holy Grail Layout