a - pointer media feature pointer media feature allows you to query the capabilities of the pointing device Such devices are a mouse, a touchpad or a touchscreen values: none → it does not support a pointing device coarse → supports a pointing device of limited accuracy (finger on touchscreen) fine → supports an accurate pointing device(mouse etc) @media (pointer: fine) { } → applies styles when there is an accurate pointing device @media (pointer: coarse) { } → applies styles when there is a pointing device with limited accuracy
b - resolution media feature resolution media feature allows you to query the output pixel density of the screen This can be specified using dots per inch (dpi) and pixels per inch (ppi) you can also use min-resolution and max-resolution @media (resolution: 150dpi) { } → applies styles with exact 150dpi @media (max-resolution: 72dpi) { } → applies styles for low resolution screens (e.g., older laptops or mobile devices) @media (min-resolution: 72dpi) { } → applies styles for high resolution screens (e.g., modern laptops, tablets, and smartphones)