Open toFrankie opened 1 year ago
在这篇文章中将和大家探讨一下关于前端在移动端开发如何去实现视觉设计稿。探讨过后,在大家的实际工作中或许能帮助解决一些问题。
一般设计稿是 640px 或者 750px(现在最流行),但是 iPhone 5 不是 320px 宽吗,iPhone 6 不是 375px 宽吗? 这里需要理解一下基础概念: 设备像素(device pixel),CSS 像素(css pixel)以及设备像素比(device pixel ratio)。
设备像素 (device pixel): 设备像素设是物理概念,指的是设备中使用的物理像素。 比如 iPhone 5 的分辨率 640 x 1136px。
640 x 1136px
CSS 像素 (css pixel): CSS 像素是 Web 编程的概念,指的是 CSS 样式代码中使用的逻辑像素。 在 CSS 规范中,长度单位可以分为两类,绝对 (absolute) 单位以及相对 (relative) 单位。px是一个相对单位,相对的是设备像素 (device pixel)。
设备像素比 (device pixel ratio): 即 window.devicePixelRatio,是设备上物理像素和设备独立像素 (device-independent pixels (dips)) 的比例。 公式表示就是 window.devicePixelRatio = 物理像素 / dips
window.devicePixelRatio
window.devicePixelRatio = 物理像素 / dips
垂直手机屏幕下,使用<meta name="viewport" content="width=device-width"/>,iPhone 5 屏幕物理像素 640 像素,独立像素还是 320 像素,因此,window.devicePixelRatio 等于 2。
<meta name="viewport" content="width=device-width"/>
比如 iPhone 5,6 使用的是 Retina 视网膜屏幕(2 倍屏),6 Plus 是 3 倍屏,使用2px × 2px的 device pixel 代表1px × 1px的 css pixel,所以设备像素数为640 × 1136px(5),750 × 1134(6),而 CSS 逻辑像素数为 320 x 568px(5),375 × 667(6);5,6 的 window.devicePixelRatio=2,6 Plus 为 3。
2px × 2px
1px × 1px
640 × 1136px
750 × 1134
320 x 568px
375 × 667
H5 适配:rem 方案 rem:是 CSS3 新增的一个相对单位,相对于 html 标签的 font-size 的大小为基础的。而 font-size 的大小可以动态根据手机屏幕宽度document.documentElement.clientWidth 来设置,从而达到自适应屏幕的目的。
我这里找了一下小米,网易,拉勾网,手淘 以及糯米,大同小异。
设计稿是 720px 的,即 5 英寸屏幕的安卓手机(720 x 1280px)。 对于页面缩放和横竖屏事件进行监听,改变 html 根元素字体 clientWidth/720/100。 如图是这样计算的 375/(720/100) = 52.0833
clientWidth/720/100
375/(720/100) = 52.0833
iPhone 6 : 375/7.5=50, 则知道设计稿应该是基于 iPhone 6 来的,所以它的设计稿竖直放时的横向分辨率为 750px,为了计算方便,取一个 100px 的 font-size 为参照,那么 body 元素的宽度就可以设置为 width: 7.5rem,于是 html 的 font-size=deviceWidth / 7.5。布局时,设计图标注的尺寸除以 100 得到 css 中的尺寸。并且布局中的 font-size 也可用 rem 单位。
375/7.5=50
width: 7.5rem
font-size=deviceWidth / 7.5
font-size
rem
html { font-size: 65.5%; }
设置html根元素字体为65.5%,对应px单位则为10.48px,则列表里时间信息字体设置为1rem = 10.48px,chrome在-webkit-text-size-adjust: 100%;情况下小于12px的一律显示为12px。
65.5%
10.48px
1rem = 10.48px
-webkit-text-size-adjust: 100%;
12px
拉勾网页面列表部分是px为单位,字体是rem,底部bar是使用百分百来控制宽高间距。
px
百分百
之前网上讨论的比较多的是
body { font-size: 62.5%; } p { font-size: 1.2em; }
则 1em = 16px * 62.5% = 10px,em 的初始值为 1em = 16px,而为了方便计算, 换算一下 10 / 16(16px 是 Chrome 浏览器默认字体大小)。缺点是进行任何元素设置,都有可能需要知道他父元素的大小,比较繁琐低效。
1em = 16px * 62.5% = 10px
1em = 16px
10 / 16
(1)动态设置 viewport的scale
var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
(2)动态计算 html 的 font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
(3)布局的时候,各元素的 css 尺寸 = 设计稿标注尺寸/设计稿横向分辨率/10
设计稿是 750 的,所以 html 的 font-size 就是 75,如果某个元素是 150px的宽,换算成 rem 就是 150 / 75 = 2rem。
整个手淘设计师和前端开发的适配协作基本思路是:
手淘推出了一套移动端适配的方案——Flexible 方案。
总结来说:
设计稿是 750 的。
优点:简单粗暴,所有 css 尺寸均为设计稿尺寸直接除 2,开发快速简单; 缺点:可能出现一排放不下的情况,需要针对小屏幕如 5 及以下做单独适配
<mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">vw</mark>
<mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">
vw 相对于视窗的宽度:视窗宽度是 100vw。 如果视区宽度是 100vm, 则 1vm 是视区宽度的 1/100, 也就是 1%,类似于 width: 1%。 那 iPhone 6 来说,document.documentElement.clientWidth=375, 则豆腐块宽度为 375/100*30=112.5px
vw
100vw
document.documentElement.clientWidth=375
375/100*30=112.5px
混合: rem px vw 百分百等单位混用
rem & 百分比%
body { padding-bottom: 14.0625%; } a.link { width: 30vw; height: 23vw; }
略,同上糯米WAP
rem & vw
html { font-size: 4.375vw; }
这里假设设计稿 640px,则设置根元素 font-size 为 4.375vw,根据屏幕宽度自适应,在视窗宽度为 320px 的时候,正好是 14px (14 / 320 = 0.04375)。 达到页面默认字体大小 14px 的目的(其他大小也 ok)。好了,现在页面上所有以 rem 为单位的属性值都会随着屏幕的宽度变化而变化,达到自适应的目的。(自适应不用 js 动态设置根元素大小)
自适应不用 js 动态设置根元素大小
p { font-size: 1rem; padding-top: 2rem: /* 设计稿上为 28px */ }
在移动端页面开发中,视觉童鞋一般会用 750px(iPhone 6)来出设计稿,然后要求 FE 童鞋能够做到页面是自适应屏幕的,这种情况下就可以用 rem 或者 vm 等相对单位来做适配,愉快和视觉童鞋一起玩耍啦。
内容转自:大专栏
在这篇文章中将和大家探讨一下关于前端在移动端开发如何去实现视觉设计稿。探讨过后,在大家的实际工作中或许能帮助解决一些问题。
前端工程师需要明白的「像素」
一般设计稿是 640px 或者 750px(现在最流行),但是 iPhone 5 不是 320px 宽吗,iPhone 6 不是 375px 宽吗? 这里需要理解一下基础概念: 设备像素(device pixel),CSS 像素(css pixel)以及设备像素比(device pixel ratio)。
设备像素 (device pixel): 设备像素设是物理概念,指的是设备中使用的物理像素。 比如 iPhone 5 的分辨率
640 x 1136px
。CSS 像素 (css pixel): CSS 像素是 Web 编程的概念,指的是 CSS 样式代码中使用的逻辑像素。 在 CSS 规范中,长度单位可以分为两类,绝对 (absolute) 单位以及相对 (relative) 单位。px是一个相对单位,相对的是设备像素 (device pixel)。
设备像素比 (device pixel ratio): 即
window.devicePixelRatio
,是设备上物理像素和设备独立像素 (device-independent pixels (dips)) 的比例。 公式表示就是window.devicePixelRatio = 物理像素 / dips
垂直手机屏幕下,使用
<meta name="viewport" content="width=device-width"/>
,iPhone 5 屏幕物理像素 640 像素,独立像素还是 320 像素,因此,window.devicePixelRatio
等于 2。比如 iPhone 5,6 使用的是 Retina 视网膜屏幕(2 倍屏),6 Plus 是 3 倍屏,使用
2px × 2px
的 device pixel 代表1px × 1px
的 css pixel,所以设备像素数为640 × 1136px
(5),750 × 1134
(6),而 CSS 逻辑像素数为320 x 568px
(5),375 × 667
(6);5,6 的 window.devicePixelRatio=2,6 Plus 为 3。H5 适配:rem 方案 rem:是 CSS3 新增的一个相对单位,相对于 html 标签的 font-size 的大小为基础的。而 font-size 的大小可以动态根据手机屏幕宽度document.documentElement.clientWidth 来设置,从而达到自适应屏幕的目的。
我这里找了一下小米,网易,拉勾网,手淘 以及糯米,大同小异。
小米官网
设计稿是 720px 的,即 5 英寸屏幕的安卓手机(720 x 1280px)。 对于页面缩放和横竖屏事件进行监听,改变 html 根元素字体
clientWidth/720/100
。 如图是这样计算的375/(720/100) = 52.0833
网易
iPhone 6 :
375/7.5=50
, 则知道设计稿应该是基于 iPhone 6 来的,所以它的设计稿竖直放时的横向分辨率为 750px,为了计算方便,取一个 100px 的 font-size 为参照,那么 body 元素的宽度就可以设置为width: 7.5rem
,于是 html 的font-size=deviceWidth / 7.5
。布局时,设计图标注的尺寸除以 100 得到 css 中的尺寸。并且布局中的font-size
也可用rem
单位。拉勾网
设置html根元素字体为
65.5%
,对应px单位则为10.48px
,则列表里时间信息字体设置为1rem = 10.48px
,chrome在-webkit-text-size-adjust: 100%;
情况下小于12px
的一律显示为12px
。拉勾网页面列表部分是
px
为单位,字体是rem
,底部bar是使用百分百
来控制宽高间距。之前网上讨论的比较多的是
则
1em = 16px * 62.5% = 10px
,em 的初始值为1em = 16px
,而为了方便计算, 换算一下10 / 16
(16px 是 Chrome 浏览器默认字体大小)。缺点是进行任何元素设置,都有可能需要知道他父元素的大小,比较繁琐低效。手淘
(1)动态设置 viewport的scale
(2)动态计算 html 的 font-size
(3)布局的时候,各元素的 css 尺寸 = 设计稿标注尺寸/设计稿横向分辨率/10
设计稿是 750 的,所以 html 的 font-size 就是 75,如果某个元素是 150px的宽,换算成 rem 就是 150 / 75 = 2rem。
整个手淘设计师和前端开发的适配协作基本思路是:
手淘推出了一套移动端适配的方案——Flexible 方案。
总结来说:
px 方案:css 尺寸为对应设计稿/2
设计稿是 750 的。
优点:简单粗暴,所有 css 尺寸均为设计稿尺寸直接除 2,开发快速简单; 缺点:可能出现一排放不下的情况,需要针对小屏幕如 5 及以下做单独适配
vw 方案
<mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">vw</mark>
,配合<mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">
百分比`来做响应式开发。vw
相对于视窗的宽度:视窗宽度是100vw
。 如果视区宽度是 100vm, 则 1vm 是视区宽度的 1/100, 也就是 1%,类似于 width: 1%。 那 iPhone 6 来说,document.documentElement.clientWidth=375
, 则豆腐块宽度为375/100*30=112.5px
混合: rem px vw 百分百等单位混用
rem & 百分比%
略,同上糯米WAP
rem & vw
这里假设设计稿 640px,则设置根元素 font-size 为 4.375vw,根据屏幕宽度自适应,在视窗宽度为 320px 的时候,正好是 14px (14 / 320 = 0.04375)。 达到页面默认字体大小 14px 的目的(其他大小也 ok)。好了,现在页面上所有以
rem
为单位的属性值都会随着屏幕的宽度变化而变化,达到自适应的目的。(自适应不用 js 动态设置根元素大小
)总结
在移动端页面开发中,视觉童鞋一般会用 750px(iPhone 6)来出设计稿,然后要求 FE 童鞋能够做到页面是自适应屏幕的,这种情况下就可以用 rem 或者 vm 等相对单位来做适配,愉快和视觉童鞋一起玩耍啦。
内容转自:大专栏