How to make responsive web page ???

Question

I want to make responsive web page in mobile phone , so please give me an idea ....

Answer 1

Responsive web design means coding your web site in a way that makes it respond to different sized screens...anywhere from big screens to phones... to effectively display the content.
https://en.m.wikipedia.org/wiki/Responsive_web_design

The techniques used to achieve this include at least 4 things...
1. flexible layouts using flexible css measurements such as em, rem, %, and others...but not px or of course any fixed measurement such as mm. The layout may be a simple one column or two or three column layout or use an underlying 12-column grid concept that is common with frameworks such as Foundation and Bootstrap, but regardless of the approach, the key is using flexible measurements in the css that allow the content to proportionally stretch and grow based on screen size.

Answer 2

2. media queries to change styles at various screen width breakpoints. For example at laptop size your content may be best displayed in two columns but at phone sized screen your content will typically be best displayed in one column. You need a style sheet that queries the screen size and adds css rules to reposition the content based on those screen sizes...media queries.
3. Flexible images that grow and shrink proportionally to the screen size.
4. The <meta viewport....> element to help the right styles immediately load for a given screen size that renders the page.

Answer 3

Thank you guys it is really helpful for me 😊.

Answer 4

the old way :
https://code.sololearn.com/W3gS00IGw160/?ref=app

Answer 5

TheCoder | Hi fellow coders your link is great but note that your link goes to the Foundation Web Framework article so uses those files for starters. It really doesn't explain how to handle responsive web design as a concept and from scratch without relying on a preexisting framework.

Answer 6

https://code.sololearn.com/WErMBTrF3Hc0/?ref=app

You could take foundation css as reference to copy their @media in your code.

From my code, copy the css section and start design your layouts based on the given different media queries, start from small screen, mobile view first to large screens.

Use em for dimensions for greater responsiness.

Not to forget to set the meta viewport inside head tag <meta name="viewport" content="width=device-width, initial-scale=1">

Answer 7

Check out CSS Media Queries and play around with that. Though can get tedious on big projects it's well worth to learn and understand.

Bootstrap is a quick way to make your sites responsive during creation, and I do love efficiency.