摘要:最近在研究 Retina 屏的适配问题,在具体方案讨论之前,陆续做了一些理解笔记,现归纳这篇HTML+CSS入门 笔记。
最近在研究 Retina 屏的适配问题,在具体方案讨论之前,陆续做了一些理解笔记,现归纳这篇HTML+CSS入门 笔记。
<meta name="viewport"> 中的 viewport 是布局视口
initial-scale 等的缩放是基于理想视口的
理想视口由设备各自提供,理想视口的宽度也是设备的独立像素
所谓“独立”是说这个设备独立像素和像素密度无关
Retina屏增加了设备像素(物理像素),所以物理像素是有密度变化的
dpr = 物理像素/设备独立像素 = 设备像素个数/设备理想视口宽度
dpr 在 JavaScript 中可以通过 window.devicePixelRatio 获取,在 CSS Media Query 中的名称是 device-pixel-ratio
CSS像素和物理像素有区别,当1个CSS像素跨越更多物理像素时,就模糊了,反之则清晰,CSS像素被用在布局视口上
缩放可以调整CSS像素和物理像素之间的比例关系。高清屏的缩放方案就是:如将布局视口扩大为理想视口的2倍,即理想视口缩放比例为1/2,那么CSS像素将比以前跨越更少的物理像素,从而保证清晰度
布局视口/理想视口 = CSS像素/设备独立像素 = 1/缩放比例
物理像素/设备独立像素 = dpr
页面清晰要求 —— CSS像素/物理像素 = 1
故 —— 缩放比例 = 1/dpr
从以下的关系比中来认知:
布局视口(CSS像素) : 设备独立像素(理想视口) : 物理像素
设备独立像素可以被看做一个中间件:
当 dpr=1 时,设 initial-scale=1.0,布局视口等于设备独立像素,设备独立像素等于物理像素,故布局视口等于物理像素,1CSS像素跨1物理像素
当 dpr=2 时,设 initial-scale=1.0,布局视口等于设备独立像素,设备独立像素是物理像素的一半,故布局视口是物理像素的一半,1CSS像素跨4物理像素
当 dpr=2 时,设 initial-scale=0.5,布局视口是设备独立像素的两倍,设备独立像素是物理像素的一半,故布局视口等于设备像素,1CSS像素跨1物理像素
再来研究高清屏,以下均设:设备独立像素是 375px,dpr=2,物理像素则是 750px,元素DIV div{width: 375px}:
initial-scale=1.0 时,1CSS像素跨越4物理像素,故 DIV 是满屏的
所以,对于图来说,第一种情况下普通图片就会拉伸,从而模糊;第二种情况,就是使用高清图
为不同屏幕的元素设置不同的像素单位过于麻烦,开发者就需要考虑是否有跨屏幕的尺寸单位解决方案
rem:当普通屏时,设 :root{font-size: 10px},则 37.5rem 是 375px;高清屏时,设 :root{font-size: 20px},则 37.5rem 是 750px,因此,我们在 DIV 元素上只需要设置一个 37.5rem,在不同屏幕下更改根元素的字体大小,就可以兼容所有屏幕了
vw 和 wh:相对于布局视口大小计算尺寸,普通屏布局视口是 375px,高清屏是 750px,无论怎么变,vw/vh 单位的最后结果都会相应变化
希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号