On the web design, there are a few different approaches for where to introduce media queries. These locations are generally called “breakpoints”, and for good reason:
media queries are inserted into CSS at where the CSS breaks and stops looking good for a given screen size or viewing environment.
Some web designers use media queries to define general screen sizes like smartphones, tablets and desktop devices, while others use resolution or orientation to differentiate their page designs.
A good way to approach inserting media queries into ebooks is to only include them at points where the design stops looking good, rather than inserting new CSS for each change in screen size.
Rather than recreate your default CSS within your device-specific CSS, only include element styles that differ from the default CSS. This keeps your secondary CSS files clean and easy to alter.