How to account for % div’s width of a responsive website

Asked

Viewed 155 times

0

I would like to know how I do that account that takes the width of a site and divides by a value x to get the proper result of a responsive site

css

  • Responsive site does not use any calculation, it uses @media with (min-width) or (max-width) to adjust for each resolution. I think you might have confused yourself with something else.

  • more like, I use the @media screen and (max-width: 480px) and I’m accessing the site from a desktop, then I’m decreasing the screen, then the site will be disfigured until I get to 480px, I notice that in some sites we decrease the screen and the content fits to any size, what I wanted to know? an example for you is youtube, decreasing the screen and see how it behaves

  • I think you’re getting confused on something, it’s one thing to adjust the size based on percentage (like display: flex for example), where the elements remain in the same place, another thing is site adjust to a need, changing the menus, making things easier for smaller screens, this would be the responsive.

  • I did not intend your answer and I believe you did not understand my doubt

  • It’s not a question of understanding the doubt, the point is that maybe you don’t even know what responsiveness is, you might think it works in a way, but it’s just a perception of you, in fact it’s quite likely that it’s a series of media-querys, one at each screen size.

  • Cool, I’ll research more on the subject, I don’t think it’s cool to fill the CSS of media-querys

  • then it is because you do not understand CSS ... css is not a markup or programming language, it is a "cascade style", (including CSS means cascade style even), the organization only comes with the experience, i work with HTML and CSS since 2008 and even so today it is difficult to organize a CSS I create from scratch.

  • more is normal then each div have up to 10 lines of code? or I am very novice in the area because my CSSmisericordia in

  • Mayron, it’s not like that, it’s not a matter of normalcy and it doesn’t always work like that, there’s no one standard scheme that you’ll be able to learn/master in 6 months, as I said myself, I’ve been working with CSS and HTML since 2008, organizing this isn’t easy, That’s why so many people appeal to Frameworks like Bootstrap. To create something and still get a good organization is necessary a lot of experience, it gave to understand, has no magic formula and does not have a unique way of doing things. You can achieve the same "effect" in different ways.

Show 4 more comments

2 answers

2

I believe that there is no calculation, there are many techniques for different things, responsive websites 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 screens of tablet:

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

Medium size screens (desktop probably):

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

Large size canvas:

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

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

CSS is a document of "cascade style", that is, apart from some exceptions such as different selectors or the use of !import, The selectors below usually override previous values that match the same elements. So in CSS it is normal to use something several times, as a media-query for each size.

2


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 measures relating, that make an element fit any screen size. Read more

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

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

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

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.