产品经理学技术:移动Web怎么做屏幕适配

Posted 程序员和产品经理

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了产品经理学技术:移动Web怎么做屏幕适配相关的知识,希望对你有一定的参考价值。

有段时间没有更新了,最近打算发一些硬一点的东西,产品经理学技术系列。


产品经理要不要懂技术的问题已经无需再讨论了,希望产品经理们可以从这些文章里,学到一点儿技术原理。



相关概念:

viewport:屏幕可见区域,你可以理解成显示屏幕大小。



1
产品经理问:移动端适配的是什么?

移动端适配一般指网页适配多种尺寸屏幕,让网页效果看起来和设计师的设计稿一样。说白了就是同一套代码在不同分辨率的手机上跑时,页面元素间的间距,留白,以及图片大小会随着变化,在比例上跟设计稿一致,达到最优的视觉效果。

个粟子

产品经理学技术:移动Web怎么做屏幕适配(一)

图1.  260*400的屏幕

产品经理学技术:移动Web怎么做屏幕适配(一)

图2.  380*400的屏幕

上面页面在不同大小屏幕上的展现,乍一看没什么问题,一般的工程师会认为已经OK了,所以前端工程师很容易忽略屏幕适配。但如果你是抠细节体验的产品经理,你可能会发现如下问题:
  1. 图1的屏幕的尺寸较小,因此头像应该小些,话题左边的空白也应该小一些。
  2. 图片应该保持正方形,而且两张图之间的边距应该随屏幕变化而变化



说白了,就是没有做好不同屏幕的适配,在某些屏幕下的视觉效果未能达到最优。


2
产品经理:那有什么方法可以做到这种适配?
工程师:关键要找到一种长度单位,使得一样的取值,在不同尺寸的屏幕上的大小按比例缩放。
长度单位我只知道px 。。。,也就是像素


本文章只关注如何适配,所以先只谈结论,后面有机会可以讲讲viewport和css像素px中的细节。

  1. 网页在viewport中布局,viewport被分成一个个小方块,一个CSS像素占一个方块
  2. 在设置了viewport宽度等于设备宽度的情况下,通过某种算法,在不同大小的屏幕上,1个CSS像素所占屏幕的物理尺寸是一样大的

产品经理:哦,既然1个CSS像素在不同屏幕上物理尺寸一样大,那px肯定不能做为适配的方法了,用什么呢?用相对尺寸-- rem !
 
长度单位 rem是相对于html标签的font-size(字体尺寸)的。例如html标签设置font-size:36px,同时div设置width:1.2rem。那么这个div的宽度就是 1.2rem=36px*1.2=43.2px

如上面的例子,如果加载页面的时候,使用JS根据屏幕的大小动态设置html标签的font-size,随着html标签font-size的值变化,div的1.2rem换算成px的值 也跟着变化,即实现了div随屏幕大小变化而变化,而CSS代码始终是width:1.2rem。以此类推到页面所有的元素。


明白了,奥秘就在于把px(像素,固定尺寸)和rem(相对尺寸)结合!
3

产品经理:原理我明白了,你有没有可执行的具体方案 ?



业内比较流行的做法(参考阿里的flexible),有以下要点:

  1. 设置viewport为设备宽度(这里不一定,但目前先这样足矣)
  2. 将viewport分成10rem,并计算出1rem在当前浏览器的像素值,把它赋予html标签的font-size (分成10rem只是为了方便计算而已)
  3. 写CSS代码时,遇到要适配的地方,比如width,margin,padding等,就不要再用px了,改成用rem

JS和Html代码如下:


产品经理学技术:移动Web怎么做屏幕适配(一)

CSS代码做了类似如下的修改:


产品经理学技术:移动Web怎么做屏幕适配(一)


运行结果如下:边距和头像图片都随屏幕变化而变化了


产品经理学技术:移动Web怎么做屏幕适配(一)
产品经理学技术:移动Web怎么做屏幕适配(一)



看不懂代码没关系,简单解释下就是,在HTML页面加载完成之后,把页面宽度等分为若干份(这里是10份),比如页面宽度是W 像素,则 1rem = W/10 像素,后面所有用到宽度的地方,都用 rem 来换算。比如外边距、内边距等。


4
产品经理:有一个问题,设计师给的设计稿尺寸单位都是用px(像素),写代码时每一个宽度都要换算很麻烦吧?
 
现有设计师提供宽度为400px的设计稿,其中某个图片的宽度设计为20px,那么,CSS的写法就是img{width: 0.05rem;},怎么得出这个结果的呢?



  1. 设计稿的宽度视同手机宽度,即假设有一个viewport为400px的手机
  2. 将它分成10rem,每个rem为40px;
  3. 那么 图片宽度20px自然就是0.5rem;

且慢,岂不是意味着,每次写到尺寸的地方,我都要先在草稿纸上把设计师给的px换算成rem?别急,sublime text 3有一款插件可以帮助你进行这个换算,你只需要输入20px,它会自动帮你换算成 0.5rem,看以下图就秒懂了





看吧,工程师手上很多工具,可以提高效率的呢~











以上是关于产品经理学技术:移动Web怎么做屏幕适配的主要内容,如果未能解决你的问题,请参考以下文章

写给产品经理之前端是如何展示后端数据的

移动适配移动Web怎么做屏幕适配

四象限、九宫格、用户体验要素模型—产品经理必备技能

​产品经理技术脑:Bootstrap

产品经理要读什么书?怎么读?

产品经理做什么?