Cap*_*arl 6 html css media-queries responsive-design
我正在用响应式设计进行一些涂鸦(最后,对吗?)并在使用媒体查询时问自己一个问题:"当我在视网膜屏幕上使用它时会发生什么?".
所以我开始想知道在定位高清屏幕时是否仍然使用像素.我的意思@media only screen and (min-width: 5 billion px)似乎是一件愚蠢的事情.
所以我想知道最佳做法是什么.PX是否在高清屏幕上缩放?或者我应该使用DPI device-pixel-ratio或者或许是完全不同的东西?
我的目标是针对仅限移动设备的页面定位所有屏幕.纯粹用于实践目的,并亲眼看到什么是可能和合乎逻辑的.
我的问题几乎如下:如何在全面解决方案中将"高清屏幕"与"正常"屏幕区分开来,我可以为"未来"构建HD和普通def屏幕.
通常您使用相对单位,例如em或%。
例如,如果页面中的所有内容都使用em,则更改font-size正文的 将会根据字体大小按比例自动缩放每个元素。
换句话说:您应该为分辨率范围编写媒体查询,并根据屏幕宽度调整最顶层的父字体大小(例如文档正文),其余样式应该在这些媒体查询之外,因为字体大小的简单更改将自动缩放整个页面,因为font-size已更改。
顺便说一句,我怀疑min-width永远不会是“数十亿像素”。目前,消费者和大多数专业屏幕的分辨率不会超过 4K (4096x3113)。也就是说,我认为您不需要使用十亿像素媒体查询!