CSS 40 💻 pointer and resolution media features

Описание: Thanks for watching.
Any thoughts? Write a comment.
If you liked the video, Like and Subscribe.
It helps to create more videos!

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)


#css #css3 #csscourse #html #html5 #omg