Adding/Updating CSS in Magento

Question

We have extended basic Magento Luma theme. Currently, we are working on the compatibility of the site in various browsers.

I have read many posts regarding media query using on Magento. Below is for your view.

//
//  Common (Both desktop and mobile)
//  _____________________________________________
& when (@media-common = true) {

}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

}

//
//  Tablet
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

}

Now my question is the below one works for all the mobiles like iPhones and Android:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m)

or do I need to target specific devices like below:

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)

Because in my case the CSS only works when I target specific devices.

Could anyone please help me to understand?

Answer 1

yes you can add your custom devices in extended less file & it will work no issue in it. Only need to verify you have to extend correctly. like i gave a lot of in my custom theme custom less file:

@media only screen and (min-width: 32.5em) {
    .review-item__name {
        display: block;
        margin: 0 0 0.52632em 0;
    }
}
@media only screen and (max-width: 41.8125em) {
    .review-item .rating-box .icon {
        margin-right: 0.25em;
        width: 0.875em;
        height: 0.8125em;
    }
}