What is the best way to do @Media for responsiveness

Question

What is the best way to do @Media for responsiveness

Navigation

#1 by (1 votes)

3

I was reading / researching how to apply responsiveness to websites for any type of platform and found this post right here on Stack @ Media

This has left me some doubts:

Is the content of the link still valid? Do I really have to create an average for each kind of resolution?

In order to apply the Media Queries correctly, I have to | pass all properties again?

Example:

I have this CSS property

.avatar::after {
    opacity: 0;
    font-family: FontAwesome;
    content: "\f040";
    color: #fff;
    font-size: 2.5rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 3px;
    left: 4px;
    width: 144px;
    height: 140px;
    z-index: 2;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 350ms ease-in-out;
}

And if you wanted to apply some media you have to do this (obviously changing the values until you get dynamic)

@media only screen and (max-width: 768px){
    .avatar::after {
        opacity: 0;
        font-family: FontAwesome;
        content: "\f040";
        color: #fff;
        font-size: 2.5rem;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 3px;
        left: 4px;
        width: 144px;
        height: 140px;
        z-index: 2;
        background-color: rgba(0,0,0,0.5);
        border-radius: 50%;
        cursor: pointer;
        transition: 350ms ease-in-out;
    }
}

html5 css3 front-end

asked by anonymous 06.06.2018 / 14:26

1 answer

Copying files with the same name to a directory without overwriting (R!) Multiple Users and Authentication - Django

score 1 · Accepted Answer

The information is still valid in the yes link, I only find a bit of exaggeration for each difference of 100px for example, do a media query. See bootstrap resolutions that are very well defined and accepted: link

For reference only if link is not available:

Extra small devices Phones (< 768px)
  Small devices Tablets (≥768px)
  Medium devices Desktops (≥992px)
  Large devices Desktops (≥1200px)

And for the case of columns or grid, there is already bootstrap and others like material that already has that.

On properties, you only need to define what will change in a specific resolution.

For example, imagine that a given class should have the display property as block , but only at a specific resolution, it should be inline-block . In this case, just override the property once:

div.umaClasse {
   display: block
}

@media screen and (max-width: 1024px) {
    div.umaClasse {
       display: inline-block
    }
}

@media (min-width: 768px) {
  /* aqui não preciso redefinir  div.umaClasse pois não vai mudar */
}