疑问
-
拿到设计搞,如何开发适配不同屏幕尺寸?
-
用模拟器访问html页面是,为什么宽度是980px?
-
图片为什么要引入3倍图?
-
媒体查询适配规则?
-
flexible、rem、vh使用场景,以及优缺点?
-
flex、grid布局兼容性问题?
正文
- 什么是绝对长度单位?什么是相对长度单位?
- 绝对单位:in(inch英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)
- 相对单位:px、em、rem等
- 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?
- 屏幕尺寸:5寸
- 屏幕分辨率: 1080px X 1920px
- 屏幕像素密度: 勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px 对角线分辨率除以屏幕尺寸:2203/5≈440dpi。
- 什么是ppi、dpi、dp、dip、px?
- ppi:pixels per inch,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度。
- dpi:dots per inch,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。
- dp、dip:dp和dip都是Density Independent Pixels的缩写,密度独立像素,可以想象成是一个物理尺寸,使同样的设置在不同手机上显示的效果看起来是一样的。
在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推。 Android和IOS都会通过转换系数让控件适应屏幕的尺寸。一个按钮给了44x44dp的大小,在160dpi密度的时候,按钮就是44x44px大小;在320dpi密度的时候,按钮就是88x88px的大小。不需要我们去书写多套尺寸。
打开chrome的开发者工具,我们可以模拟各个手机型号的显示情况,每种型号上面会显示一个尺寸,比如iPhone X显示的尺寸是375x812,实际iPhone X的分辨率会比这高很多,这里显示的就是设备独立像素。
- px:就是通常所说的像素,使网页设计中使用最多的长度单位(css像素)。将显示器分成非常细小的方格,每个方格就是一个像素。(网页重构中使用的px和屏幕分辨率的px不一定是一样的大小。)
从 iPhone4 开始,苹果推出了 Retina 屏,分辨率提高了一倍(640*960),而屏幕尺寸却没变。当页面缩放比例为100%时,1个css像素=1个dp 1个css像素=2个设备像素
回答:为什么要引入3倍图(解决图片模糊问题)? 理论上,位图的每个像素对应在屏幕上使用一个物理像素来渲染,才能达到最佳的显示效果。
而在dpr > 1的屏幕上,位图的一个像素可能由多个物理像素来渲染,然而这些物理像素点并不能被准确的分配上对应位图像素的颜色,只能取近似值,所以相同的图片在dpr > 1的屏幕上就会模糊:
解决方案: 为了保证图片质量,我们应该尽可能让一个屏幕像素来渲染一个图片像素,所以,针对不同DPR的屏幕,我们需要展示不同分辨率的图片。
如:在dpr=2的屏幕上展示两倍图(@2x),在dpr=3的屏幕上展示三倍图(@3x)。
- 什么是mdpi、hdpi、xdpi、xxdpi? Google官方指定按照下列标准区分不同设备的dpi:
苹果的区分则更为简单:非高清屏、高清屏、超高清屏。
从数值上看,苹果和安卓有这样的对应关系:
- 1x、2x、3x……这个系数怎么来的(设备像素比)?
设备像素比device pixel ratio简称dpr,即物理像素和设备独立像素的比值。
在web中,浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。
在css中,可以使用媒体查询min-device-pixel-ratio,区分dpr:
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }
在React Native中,我们也可以使用PixelRatio.get()来获取DPR。
当然,上面的规则也有例外,iPhone 6、7、8 Plus的实际物理像素是1080 x 1920,在开发者工具中我们可以看到:它的设备独立像素是414 x 736,设备像素比为3,设备独立像素和设备像素比的乘积并不等于1080 x 1920,而是等于1242 x 2208。
实际上,手机会自动把1242 x 2208个像素点塞进1080 * 1920个物理像素点来渲染,我们不用关心这个过程,而1242 x 2208被称为屏幕的设计像素。我们开发过程中也是以这个设计像素为准。
- viewpoint 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,窗口可大于或小于手机的可视区域,一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。 部分机型默认viewport大小:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
每个设置对应的是:
注意: 网页中使用的单位px,就是通常所说的像素,是网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素(这和我们理解的屏幕分辨率的1920px*1080px的px是不同的)。不同设置下,方格的大小不一样。
例如iPhone4S如果不设置viewport,他就会默认是980px,就像把屏幕分成980份(不是屏幕分辨率的640px哦!)。如果设置一个元素为100px*100px,看起来就是屏幕的100/980,可能如下图所示:
例如iPhone4S如果设置viewport width=device-width,他就会是320px,就像把屏幕分成320份(不是屏幕分辨率的640px哦!)。如果设置一个元素为100px*100px,看起来就是屏幕的100/320,可能如下图所示:
未设置viewport,弹出来的都是设备的默认宽度,基本是980px,除了最后一台三星老爷机是800px。
设置了viewport,width=device-width,弹出来的是设置好的宽度,375px、360px、320px。为什么是这个大小?这就要用到上面讲的知识点了。
iPhone6的屏幕分辨率是1334*750px,ppi是326,所以系数是2x。那device-width就等于750/2=375px。
红米1s的屏幕分辨率是1280*720px,ppi是312,所以系数是2x。那device-width就等于720/2=360px。
页面里的红色块给的是200*200px,在几个设备看起来好像差不多大的样子。
(上图左边是三星note4,右图是红米1s)
三星note4的屏幕分辨率是2560*1440px,ppi是515,所以系数是4x。那device-width就等于1440/4=360px,和小米的divice-width一样大小。但是看起来左边的红色块明显大于右边,因为左边的设备大啊,虽然两者都是分成360份,但是明显左边的1份比右边的1份大。
以上解释了为什么给元素赋予固定的像素值,给字体16px的大小,在大部分手机里居然能看起来差不多大小,也明白了我们并不需要写其他尺寸来适配不同的屏幕大小。
回答:拿到设计搞,如何开发适配不同屏幕尺寸?
- 1px问题 而在设备像素比大于1的屏幕上,我们写的1px实际上是被多个物理像素渲染,这就会出现1px在有些屏幕上看起来很粗的现象。
伪类+transform方案1:
.border-1px {
position: relative;
height: 1px;
top: 0;
left: 0;
width: 100%;
transform-origin: 50% 100%;
border-bottom: 1px solid #ebebeb;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
.border-1px {
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3),
(min-resolution: 3dppx) {
.border-1px {
-webkit-transform: scaleY(.3333);
transform: scaleY(.3333);
}
}
// height和width使div放大,但是border仍为1
// transform使
<div class='border-1px'></div>
- flexible方案
flexible方案是阿里早期开源的一个移动端适配解决方案,引用flexible后,
- 我们在页面上统一使用rem来布局(width、height), rem 是相对于html节点的font-size来做计算的。布局(width、height)用rem.
- 设置body的font-size,根据不同倍屏设置字体的大小。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
<title>flexible</title>
<script>
(function flexible(window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
console.log(document.body.style.fontSize)
} else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 10
console.log(rem)
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
</script>
<style>
img {
width: 2rem;
height: 2rem;
}
img.px {
width: 75px;
height: 75px;
}
</style>
</head>
<body>
<div>2rem VS 75px</div>
<br>
<img src='./1.jpg' />
<img class='px' src='./1.jpg' />
</body>
</html>
效果图: 缺点:屏幕越大,图像或字体显示更大而不是更多
- 项目中的适配方案: *. 通过rem转成两套px进行适配 *. 图片等使用flex布局
html {
font-size: 100px;
line-height: 100px;
}
@media screen and (max-width: 360px) {
html {
font-size: 90px;
line-height: 90px;
}
}
- 横屏竖屏安全适配、暗黑模式
- 低版本操作系统例如ios9、android5.1不支持es6语法,直接解析失败
- 引入vconsole可以再手机上显示控制台
- 防止滚动穿透
// 防止滚动穿透问题: 上层弹出以后给下层hidden;关闭弹层改为auto
document.body.style.overflow = this.isShowReasons ? 'hidden' : 'auto';
- ios fixed抖动
position: -webkit-sticky;
position: fixed;
15.图片不被压缩
.img-li {
position: relative;
box-sizing: content-box;
width: 80px;
height: 80px;
margin: 0 8px 15px 0;
border-radius: 6px;
display: inline-block;
vertical-align: middle;
text-align: center;
&:nth-child(4n) {
margin-right: -8px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
}