How to make account in% width of div's of a responsive site [closed]

Fluid layout: is the technique of encoding a layout so that its components shrink as the viewport (browser window) decreases. The main basis of the fluid layout is to use website"> website"> website , that make an element fit any screen size. Read more

Responsive layout: is a technique of adapting the layout to any type of resolution that a user can access. It uses the fluid layout as a basis. Responsive design uses the stockings to adapt (improve the user experience in that resolution) your layout as it breaks down into a certain resolution. Read more

To convert pixels to%, simply use this formula: object / context = x 100 result

An example: Assuming I have the parent div of 1200px and the daughter div has 250px, then I get the object (daughter div) and split by the context (parent div), and multiplied by 100 .

250px (object) / 1200 (context) * 100 = 20.8333333333%.

I believe that there is no calculation, there are many techniques for different things, responsive sites usually use a media-query for each size, for example, bootstrap uses the following sizes for grids (in version 3):

Small Cell Phone Screens:

@media (max-width: 767px) {
    /*aplica as necessidade conforme necessário */
}

Small tablet screens:

@media (min-width: 768px) {
    /*aplica as necessidade conforme necessário */
}

Medium size screens (probably desktop):

@media (min-width: 992px) {
    /*aplica as necessidade conforme necessário */
}

Large size screens:

@media (min-width: 1200px) {
    /*aplica as necessidade conforme necessário */
}

In other words, you can use multiple media-queries for each size and need.

CSS is a cascading style document , that is, aside from some exceptions like different selectors or the use of !import , the selectors below will usually overwrite the previous values that match the same elements. So in CSS it's normal to use something like a media-query for each size several times.