How make a page fit on any screen with any orientation [closed]


Tags: html,css

Problem :

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.

Image on landscape and as an iPhone

Image on portrait as a Samsung device

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.



Solution :

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.

A lot of what you in responsive development do also depends on your application. To make things simple you should begin using HTML, JavaScript and CSS. Any libraries you use must be related directly with any of these languages.

A big rule of thumb is: always try to do responsive development with CSS, but if you cannot for a good reason, then and only then should you rely on JavaScript. If you did not learn why this is important after reading the first paragraph of my answer, then you should spend more time going over responsive web design and development (it's worth it!).

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).

  1. Learn and understand media queries.
  2. Learn about advanced CSS contepts such as mixins and how you can combine them with #1 to make your coding life easier.
  3. 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).
  4. 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).
  5. Do not forget your good friend JavaScript (and the plethora of frameworks you can use with it). Be sure to compliment any behavior you cannot achieve with CSS to achieve your responsive behavior, not the other way around.
  6. 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.

Good luck!

P.S.: Here is a little fun article to get you started: Holy Grail Layout


    CSS Howto..

    How to set a box on bottom of a box?

    how to give space between tr tag and divide by | in html

    How to call single dropdown to every element using jquery

    How do I take code from Codepen, and use it locally?

    How to make css background-image a fluid image work in IE

    CSS: How to blur background image within the div?

    How do you create a scrollbar that recognizes scrolling only for the current topmost container using css?

    How to align 3 divs with CSS retaining relative position while scaling window

    How to implement responsive, independently scrolling panes in Bootstrap 3?

    How to center and span table heading (row)

    How to make one css input type be displayed the same as another input type

    How to vertically center text span in fixed position div?

    How to get css width of class?

    How can I center an image with text that follows it using CSS?

    How to properly escape attribute values in css/js attribute selector [attr=value]?

    How to force style HTML element?

    how to space 4 images equally within a div?

    How to apply CSS to part of some text without breaking the text content itself

    How to select the second th into the thead of a table having a specific ID using CSS?

    Div doesn´t show background color after float:left

    How to remove white border from blur background image

    CSS/Javascript show image remove x on mouseover/hover

    How to track element movement and trigger function at specific spot?

    How could I use the html a tag to change div width and height?

    How to reset Chrome dev tools CSS styles filter?

    How to add css styles on aria-hidden attribute

    Using css modules, how can I use composes to include a list of variables for colors

    How to stop columns wrapping in three column liquid page?

    CSS - How to align 2 fields into 1 row?

    How to layout images in a grid? [closed]