基础概念
物理像素:代表屏幕上有多少个点,比如1080x2340表示屏幕水平方向一排有1080个物理像素点。
逻辑像素:表示屏幕展示物体的视觉尺寸是多少。逻辑像素相同表示物体看起来或者打印出来大小一样,物理像素点越小,一个逻辑像素包含点物理像素点就越多,看起来就越清晰。
CSS像素:一般情况下CSS像素等同于逻辑像素,但浏览器可以放大,手机也有放大模式,此时就不再相等。当页面缩放比不为1时,CSS像素和逻辑像素不再对应。比如当页面放大200%,则1个CSS像素等于4个逻辑像素。
PPI:是屏幕对角线的物理像素的个数除以对角线英寸数。
设备像素比:是在水平或者垂直方向,在同一排一个逻辑像素能放几个物理像素。
拓展:仅需要物理像素难道不够吗?为什么要有逻辑像素呢?
因为物理像素仅代表像素点的个数,并没有有规定一个点实际的尺寸是多少。假设有一个按钮,宽度用100个物理像素表示,因屏幕物理像素排列方式和密度的差异,不同屏幕上实际的视觉宽度必然不一样。而逻辑像素相同就表示希望按钮在不同屏幕上看起来一样大。
移动端适配
移动端适配的目标是让页面在不同的移动设备上都合理展示。一般来说有两种方向:
- 0适配,使用合理的flex布局+媒体查询做微调
- 基于一个尺寸的屏幕做设计,其他屏幕等比缩放
0适配
所谓的0适配就是根本不需要适配,基于设计稿使用flex做布局后也能在其他设备上合理展示。
手机屏幕的逻辑像素一般在320px~428px这个范围,手机页面最常见的布局就是水平均分排列和两栏布局(如下图所示)。使用flex布局实现的水平均分排列原本就是响应式的,不管是320还是428的屏幕都是均分排列。对于两栏布局,固定部分的宽度相同,自适应部分随着屏幕尺寸的差异也会自动展示更多或者更少的内容。
问题: 页面中的元素实体(如文字)会出现小屏幕中太大,大屏幕中太小的问题,需要手动媒体查询微调
等比缩放
所谓的等比缩放,就是设计师基于一个尺寸做一套设计图,开发工程师会基于设计图100%还原页面。在不同屏幕上的视觉呈现比例完全一致。以下图为例,屏幕尺寸虽有差异,但同一页面视觉效果完全一样,页面内容等比缩放。
优点: 简单、可控,可以一套代码满足任何场景
缺点: 手机屏幕之所以越来越大,本意是想展示更多的内容,而不是让文字图片越变越大。反过来看,如果文字图片在IPhone12 Max Pro上看起来展示合理,在IPhone 6s上会小的像蚂蚁。
下一节介绍等比缩放适配的具体方案:1、viewport缩放方案;2、动态rem方案;3、vw适配方案;
viewport缩放
基础知识
如果页面本身是移动端的设计风格,设计师在设计页面时按移动端通用的375px或者428px来做设计,我们需要在head标签里加:
1 | <meta name="viewport" content="width=device-width"> |
如果原本就是针对PC浏览器设计的页面未适配过移动端,不推荐加此meta。
这段代码的意思是让页面的布局视口(layout viewport)的宽度等于视觉视口(virsual viewport)的宽度,此时页面元素会以设备逻辑像素宽度做为文档宽度进行布局。
如果不加,则页面元素会以980px的文档宽度进行布局,出现左右滚动条;
原理
在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸的差异,而是直接按设计稿的标注来开发。比如设计稿里标注的文字字号是30px,CSS里就设置文字字号30px。
页面开发好后,在HTML的head标签里加入:
1 | <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" > |
举个例子。假设设计师交付的设计稿宽度是750px,设计稿上一个标题字号标注的是32px 、margin是20px。我们以标注的大小来写CSS。之后需要通过JavaScript计算获取屏幕的宽度(假设需要适配逻辑像素宽度是428px的屏幕),在HTML的head里添加
1 | <meta name="viewport" content="width=750px, initial-scale=0.57" > 即可(428/759 = 0.57) |
这段代码的意思是:设置布局视口(layout viewport)的宽度为750px(此时页面一般会超出屏幕),再缩放页面(initial-scale)使其恰好撑满屏幕。
代码实现
1 |
|
动态rem
前言
前面我们讲过可以使用viewport缩放方案实现页面级的缩放适配。但该方案有个问题,1px的边框在大屏手机被放大后显得很粗,在小屏手机上被缩小后又显得太细。我们需要更换另外一种方案——整体能根据屏幕放大缩小,局部又能保持固定的尺寸。
可以使用动态REM方案。
原理
在使用单位控制页面元素大小时,可以使用固定单位px,也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理,对于需要适配屏幕等比缩放的元素可以选用rem作为单位,对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size,就能让所有使用rem单位的元素跟随着发生变化,而使用px单位的元素不受影响。
举个实际的例子。设计师交付的设计稿宽度是750px,设计稿上一个div的标注尺寸是375px(宽度是设计稿宽度的一半)。我们可以
设置html的font-size 为 100*屏幕宽度/设计稿宽度
在写CSS时设置 div 的宽度是 3.75rem (计算时用设计稿标注值除以100),边框宽度为1px
代码实现
1 |
|
vw适配
前言
前面我们讲过两种等比缩放的方案:viewport缩放 和 动态REM,现在再讲另外一种不需要JavaScript的适配方案——vw适配方案。
原理
vw是相对单位,1vw表示屏幕宽度的1%。基于此,我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。
举个例子。设计师交付的设计稿宽度是750px,设计稿上一个标题的fontSize标注尺寸是32px。(32/750)*100% = 4.27% ,换句话说这个标题的字号占屏幕宽度的占比是4.27%,不管任何屏幕都是如此。4.27% 即 4.27vw。
对于任何需要等比缩放的元素,在写CSS设置样式时直接换算成vw即可,尺寸 = 100vw*设计稿标注大小/设计稿宽度。
代码实现
1 |
|
在写样式时会发现,虽然不用写JS做适配,但标注尺寸换算为vw又麻烦又不直观。
我们可以在CSS里使用calc来换算换,只不过需要注意新语法的兼容性。
1 | :root { |
在正式的项目里,我们也可以用SCSS,把换算交给预处理器
1 | @function px2vw($px) { |
总结
适配方案对比:推荐 “viewport缩放方案”
viewport缩放方案:
- 需要使用JS
- 直接使用设计稿标注无需换算
- 整体缩放,不能局部控制
viewport缩放方案:
- 需要使用JS
- 设计稿标注的px换算到CSS的rem计算简单
- 整体缩放,也能局部控制
viewport缩放方案:
- 需要使用JS
- 设计稿标注的px换算到CSS的vw计算复杂
- 整体缩放,也能局部控制