Responsive site with %

Question

Well, my doubt is a bit abstract, however I would like to hear some aspects regarding Responsive Site.

I would like to know, what is the way a website will look the best for all screens. That is, if I use '%' instead of 'px', the site is at least 90% responsive?

What more aspects are relevant to make the site look as beautiful as possible to all screens.

Thank you.

Answer 1

Stay. A website can be done by setting the sizes in percentage and fixing what break with the media queries. However, making the responsiveness of a website through % turns out to be somewhat complicated and laborious. You would need to work each element with a relative size, as it would be a percentage relative to the monitor. One of the alternatives is to use frameworks that already do this for you through classes like Bootstrap, Wirefy, Skeleton, Less Framework and so on (in the end, these frameworks use everything in percentage).

Aspects: responsive images, which fit the screen size, accessibility (thinking that the user can use the touch on a small screen instead of a mouse), etc..

According to the book Responsive Web Design: Pages adaptable to all devices, the crack for responsiveness is:

• Fluid layout: think, from the conception, in layouts that do not have fixed size, and that can be adapted, preventing the content to be cut or create scroll bars;
• Flexible images and features; and
• Media queries: directives in which it is possible to hide, make appear and reposition elements and interactions according to the current resolution being used at the time of the visitation. After all, a site does not need (and indeed should not) to have exactly the same appearance and layout of elements in any resolution.

Reference: ZEMEL, Tárcio. Responsive Web Design: adaptive pages for all devices. Casa do Código, 2015. link