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
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
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):
@media (max-width: 767px) {
/*aplica as necessidade conforme necessário */
}
@media (min-width: 768px) {
/*aplica as necessidade conforme necessário */
}
@media (min-width: 992px) {
/*aplica as necessidade conforme necessário */
}
@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.
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.– Guilherme Nascimento
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 to480px
, 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– goio
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.– Guilherme Nascimento
I did not intend your answer and I believe you did not understand my doubt
– goio
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.
– Guilherme Nascimento
Cool, I’ll research more on the subject, I don’t think it’s cool to fill the
CSS
of media-querys– goio
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.
– Guilherme Nascimento
more is normal then each div have up to 10 lines of code? or I am very novice in the area because my
CSS
misericordia in– goio
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.
– Guilherme Nascimento