.whatsmybreakpoint {
    display: block;
    border: 1px solid orange;
    margin: 1em;
    padding: 1em;
}

.whatsmybreakpoint:after {
    content: 'mobile portrait';
}

@media only screen and (min-width:568px) {
    .whatsmybreakpoint:after {
        content: 'mobile landscape';
    }

    body {
        /* background: pink; */
    }
}

@media only screen and (min-width:768px) {
    .whatsmybreakpoint:after {
        content: 'tablet portrait';
    }

    body {
        /* background: tomato; */
    }
}

@media only screen and (min-width:1024px) {
    .whatsmybreakpoint:after {
        content: 'tablet landscape';
    }

    body {
        /* background-color: aqua; */
    }
}

@media only screen and (min-width:1250px) {
    .whatsmybreakpoint:after {
        content: 'desktop';
    }

    body {
        /* background-color: fuchsia; */
    }
}