政务网站设计,网站开发工作标准,网站开发公司怎么能接到单子,经营地址怎么在国税网站做更改为什么需要适配
目前市面上设备屏幕属性十分多样化#xff08;宽度和DPR并不一致#xff09;#xff0c;而作为设计和前端开发#xff0c;无法为每个尺寸的设备单独设计一套UI并将其转为前端代码#xff0c;这不现实。所以我们需要一套方案来将一套设计稿完美呈现在不同尺…为什么需要适配
目前市面上设备屏幕属性十分多样化宽度和DPR并不一致而作为设计和前端开发无法为每个尺寸的设备单独设计一套UI并将其转为前端代码这不现实。所以我们需要一套方案来将一套设计稿完美呈现在不同尺寸的设备上。 设备的多样性不止体现在设备屏幕尺寸上还有屏幕的DPR也不同有1有2有3等等。不同DPR的设备展示的视图清晰度也不同所以这套方案要考虑屏幕尺寸和屏幕清晰度这两个因素。
一些基本概念
一个屏幕的DPR是根据屏幕的物理像素除以屏幕的设备独立像素也叫密度无关像素得来的DPR 物理像素 / 设备独立像素。iphone6宽度的设备独立像素是375宽度的物理像素是750那么就意味着DPR是2。这就意味着需要四个物理像素来描绘一个设备独立像素就像一个田请忽略边框的形状。
设备独立像素又叫做密度无关像素可以认为是系统中一个点这个点可以是可以由程序使用的虚拟像素如CSS的px然后系统会将这个像素转换为物理像素在屏幕的DPR为2的设备上CSS的1px就会转为4个物理像素。
屏幕密度PPI通常是计算每英寸有多少个像素设备独立像素计算公式是屏幕斜对角的像素数除以屏幕的英寸得出PPI的值。
对一开始适配问题做出一定程度的解释
根据上面DPR解释可以知道在DPR为2的屏幕上会使用四个设备像素来描述一个CSS像素。在这种情况下一张100*100的图片在页面上的尺寸也是100*100那么其实是200*200个物理像素来描绘这张图片很明显图片的像素是不够的这时候系统就会让剩下的像素就近取色这样就造成了图片的模糊想要图片不模糊要么提供一个200*200的图片要么将页面上100*100的容器缩小到50*50。
在DPR为2的屏幕上高度的1px其实是由2个物理像素描绘的所以该屏幕可以描绘的最小像素应该是0.5px所以这个1px应该是0.5px才对。
怎么做适配
既然提出了问题那么就需要解决解决方案主要来自手淘的flexibleJS其原理就是适配不同屏幕尺寸主要用到了rem而适配不同的DPR主要用到了meta nameviewport contentinitial-scale1/dpr/
不同屏幕尺寸
在CSS中单位使用rem那么只要修改html的font-size那么这个页面的尺寸都会随之等比例改变。例如 首先我们知道设计稿宽度例如750px其中有个100px的正方形 其次我们也知道当前运行代码的设备的屏幕宽度document.documentElement.clientWidth这样就可以算出来在当前设备下这个正方形的宽高 通过观察上面设备下元素尺寸的计算公式 100px * document.documentElement.clientWidth / 750。可以简化成 设计稿元素尺寸 * 某个系数可以联想到rem。这个单位后面的系数就是rem对应的font-size值。 所以在375屏幕尺寸下rem对应的font-size就是 375 / 750 等于 0.5px0.5px * 100px 等于 50px。所以750下100单位在375设备下为50单位。 到这里我们得到公式 x 元素在设计稿上的尺寸 * (设备宽度 / 设计稿宽度)其中 设备宽度 / 设计稿宽度是html的font-size值也就是1rem。 但问题是浏览器有最小font-size的限制目前算出来的1rem对于的font-size是0.5px显然小于最小font-size的限制。 所以我们要将1rem对应的font-size搞大点修改下公式 x (元素在设计稿上的尺寸 / 100) * ((设备宽度 / 设计稿宽度) * 100) 将1rem对应的font-size变大之后要将其调整回来需要对设计稿上的尺寸再缩小对应倍数。 到这里我们就完成了一份设计稿适配不同尺寸设备的方案。
div classcontainer
/div
style.container {width: 1rem; /* (100px / 100)rem */height: 1rem; /* (100px / 100)rem */}
/style
script
document.querySelector(html).style font-size: document.documentElement.clientWidth / 750 /* 设计稿尺寸 */ * 100 /* 将1rem对应的font-size值放大 */) px
/script不同DPR
模糊主要是由于图片像素不够导致的例如有一张100 * 100的图片需要渲染在200 * 200的盒子中因为图片的10000个像素点需要铺满40000个像素的面积就会导致图片渲染的有些模糊这个问题可以通过切2~3倍图来解决。但是0.5像素的问题则需要使用页面缩放来解决因为dpr2的设备上可以渲染出来0.5px而逻辑像素最小是1px。 对于适配不同设备DPR的高清方案思路如下
将整个页面的基础单位也就是rem放大 DPR倍使用meta name“viewport” 将整个页面缩小到 1 / DPR
这样就可以保证一个物理像素对应一个逻辑像素让整个画面看起来清晰很多。
function adapterHD (width 750) {const dpr window.devicePixelRatio || 1document.querySelector(meta[nameviewport]).setAttribute(content, widthdevice-width, initial-scale 1 / dpr)const oneRem Math.floor(document.documentElement.clientWidth / width * 100)document.querySelector(html).style font-size: (oneRem) px
}因为首先设置了缩放缩放后 documentElement.clientWidth就会放大 DPR倍所以onRem没有显式乘以DPR。
到这里还有两个问题需要解决
html元素被设置font-size之后因为font-size属性可以继承整个网站的font-size默认都会变的很大所以需要在body元素上重置下font-size属性因为默认的font-size需要乘以100所以在CSS中我们需要将设计稿上的尺寸除以100并且转换成rem单位这个事情开发者手动去做十分繁琐且容易出错所以可以用下面提到的postcss插件完成
flexibleJS
在引用上文提到的手淘的flexibleJS之后会自动设置html的font-size为75px这时候的主要问题就是怎么将设计稿一般都是750*1334中的各个px值转换为rem。可以自己手动算比较麻烦可以使用编辑器插件使用postcss插件等详情见使用Flexible实现手淘H5页面的终端适配
参考
移动端H5页面高清多屏适配方案
使用Flexible实现手淘H5页面的终端适配
viewports剖析
再聊移动端页面的适配
移动端Web页面适配方案
