What does this line of CSS mean? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

It's called CSS3 Media Queries which is a technique to help your website adapt to various of screen dimensions or basically, it helps to deliver different styles to different devices.

Since you're new, let's break down your media query to two parts:

@media only screen

This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.

and (min-device-width: 320px) and (max-device-width: 480px)

This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.