Responsive layout with grid, html tables, media-queries-CodePudding

Which is the better way to create a responsive website among grid, media queries, and HTML tables.

CodePudding user response：

often neglected by developers when it comes to responsive websites: Typography. Typography!

@media (min-width: 640px) { body {font-size:1rem;} }

@media (min-width:960px) { body {font-size:1.2rem;} }

@media (min-width:1100px) { body {font-size:1.5rem;} }

CodePudding user response：

There are lots of ways to create a responsive behavior in css, you gave some good examples for them. Personally, I'm using the Flexbox and Grid display methods to align html containers and contents, and by using Media Queries i can make them interact responsively for any device.

For example, if you wanna render a cards-based container, meaning there will be multiple div elements with their own contents, aligned in a straight line, i would use the flex-wrap property to break them instead of overflowing to one of the page sides. If the cards are getting small enough for the page, i'd use the vw value for my card's width at a certain page width, using media queries.

Of course you can have your own preferences for different responsive methods, and there are a lot you can search on the internet, i just gave some of my own.

CodePudding user response：

Use media queries and flex, Some example breakpoints,

// Extra large devices (large desktops, 1200px and down)
@media (max-width: 1200px) { ... }

// Large devices (desktops, 992px and down)
@media (max-width: 992px) { ... }

// Medium devices (tablets, 768px and down)
@media (max-width: 768px) { ... }

// Small devices (landscape phones, 576px and down)
@media (max-width: 576px) { ... }