移动端大图缩放模糊_移动端高清适配方案(解决图片模糊问题、1px细线问题)...

本文详细解析了CSS中的像素与物理像素的区别,介绍了设备像素比(dpr)的概念,以及viewport在响应式设计中的作用。讨论了移动端与PC端屏幕差异,包括一倍屏、Retina屏的显示原理,并阐述了用户缩放对CSS像素的影响。同时,提到了使用meta标签控制理想视口和rem单位进行页面适配的方案,确保在不同设备上实现统一的视觉效果。
摘要由CSDN通过智能技术生成

干货储备:

物理像素、设备独立像素和设备像素比

在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中1px所代表的物理像素是不同的。在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素是和屏幕像素密度有关的。

物理像素(physical pixel)

物理像素又被称为设备像素、设备物理像素、它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个CSS像素,也就是说,多倍屏以更多更精细的物理像素点来显示一个CSS像素点,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素。

设备独立像素(device-independent pixel)

设备独立像素又被称为CSS像素,是我们写CSS时所用的像素,它是一个抽象的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。

设备像素比(device pixel ratio)

设备像素比简称dpr,定义了物理像素和设备独立像素的对应关系:设备像素比 = 物理像素/设备独立像素。

20190128161446016398.png

CSS的1px等于几个物理像素,除了和屏幕像素密度dpr有关,还和用户缩放有关系。例如,当用户把页面放大一倍,那么CSS中1px所代表的物理像素也会减少一倍。

viewport

viewport就是设备上用来显示网页的那一块区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其他值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

20190128161446665812.png

明确三种不同的 viewport 视口:

visual viewport 可见视口,指屏幕宽度

layout viewport 布局视口,指DOM宽度

ideal viewport 理想视口,使布局视口就是可见视口即为理想视口

获取屏幕宽度(visual viewport)的尺寸:

window.innerWidth/Height

获取DOM宽度(layout viewport)的尺寸:

document.documentElement.clientWidth/Height

设置理想视口 ideal viewport:

该meta标签的作用是让layout viewport的宽度等于visual viewport的宽度,同时不允许用户手动缩放,从而达到理想视口。

meta[name="viewport"]里各参数的含义为:

width:设置 layout viewport 的宽度,为一个正整数,或字符串"width-device";

initial-scale:设置页面的初始缩放值,为一个数字,可以带小数;

minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数;

maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数;

height:设置layout viewport的高度,这个属性对我们并不重要,很少使用;

user-scalable:是否允许用户进行缩放,值为 "no" 或 "yes";

rem适配方案

适配是为了使页面在不同手机设备上,相对保持统一的效果。移动端自适应方案很多,有百分比布局,弹性和模型布局等,但是最好用的要数 rem 布局了。

rem是相对于根元素的字体大小的单位,我们可以根据设备宽度动态设置根元素的 font-size,使得以 rem 为单位的元素在不同终端上以相对一致的视觉效果呈现。

如下是3种根据屏幕宽度设置rem基准值的方法:(注:为了换算方便,以下三种方法都用 1:100的比例,即 1rem = 100px)

用JS设置rem基准值:

20190128161446902140.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值