What is the best way to have a webpage displayed nicely on both PC and mobile?

Question

Hey guys! Does anyone have some tricks and ideas that work well to have all elements of a website displayed nicely on both PC and cellphone/tablet? Could you please share your experiences? Thanks :)

Answer 1

Using vh and vw instead of others. Look at this :
https://code.sololearn.com/W2Bo6PsVvZkw/?ref=app

Answer 2

Bootstrap library
Or
Media Queries Css

Answer 3

Learn flexbox, you could make better responsive site.

Answer 4

use em instead of px. px works on the actual physical pixels of the screen. more ppi would make the element small and less ppi would make it exceedingly big.

if you have navigational bars or menus and want them to change entirely, you can use @media.

here's a code i made which is completely workable on both phone and computer. you can see that you really dont have to use advanced css syntaxes to get the ball rolling. switching from px to em or other unit often helps.
https://code.sololearn.com/WP7kgD8lQf71/?ref=app

Answer 5

Thanks for the tips guys!! I'll take a look at all of your suggestions!

Answer 6

include the following in your head section :<meta name="viewport" content="width=device-width, initial-scale=1">
Also when you give size measurements for your images and structural tags use % insteady of px.

Answer 7

@media