What is the need of "and" operator here in this case? @media screen and (min-width: 730px){ }

Hey Tony Shangkuan !

This query specifies two conditions:

1. The media type should be screen. This means the styles inside will apply only to screen displays (like computer screens, phones, tablets, etc.) and not to other media types like print.

2. The viewport should have a minimum width of 730px.

Both of these conditions must be met for the enclosed styles to be applied, hence the and operator.

I haven't written it this way in a while though because writing it like...

@media (min-width: 730px) { ... }

only specifies the viewport width condition, not the media type. Modern web browsers default to the screen media type if none is specified. So, in most practical scenarios, these two media queries will behave the same way.