移动端H5设计稿和前端切图

时间：2023-09-01 21:48:01 | 来源：网站运营

时间：2023-09-01 21:48:01 来源：网站运营

移动端H5设计稿和前端切图：以下所有内容来自各网站的复制粘贴和搜索的总结，感谢引用中的各位作者。

因为引用太多，无法一一给出链接，特此声明；

UI篇

---

由于对H5页面的开发较少并且非规范，当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），UI设计师和前端工程师对尺寸很是纠结；




我们先从UI在讨论到前端；




智能手机尺寸表：

其中iPhone6+采用了分辨率降频处理，其分辨率为1920×1080，可以理解为

我们常说的屏幕分辨率 = 物理像素 （都是屏幕的实际具有的像素数目）

屏幕尺寸：屏幕的对角线的长度，单位为英寸，比如：

设备独立像素 = 逻辑像素（也叫做逻辑点，logic point，单位pt）

逻辑像素 x devicePixelRatio= 实际尺寸（物理像素），值为近似相等值；

devicePixelRatio：倍率




倍率是做什么用的呢？

UI在提供给前端设计图的时候，一定要注意自己的设计图尺寸是按照多少倍率设计的，这样在前端开发的时候才会与设计图匹配度更高；

@2x，所有的字体间隙一定要是2的倍数；

@3x，所有的字体间隙一定要是3的倍数；




那么用iphone6plus的尺寸开发时，选择1242 x 2208 还是 1080 x 1920？




以下搜索总结出，最佳的UI尺寸：

750 x 1334 @2x iphone6

720 x 1280 @2x 红米4x

640 x 1136 @2x iphone5




网页的安全宽度：京东 1210px

天猫 宽屏1190px 窄屏990px

美团 1200px

微博 大屏1280px 中屏1000px 小屏760px




视觉设计：画布1920px时，实际要用1903 + 17（右侧滚动条宽度）

但为了取整，通常17px的滚动条忽略，采用1920

前端篇

---

viewpoint：h5页面的前端代码里必须包含<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />




这里举例640 x 960（可以使任意高） @2x的设计稿

方法一

①取一个100px的font-size为参照；

②设计稿竖直放时的横向分辨率为640px，为了计算方便，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。




deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px




这个deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';




例如：

网易的这种做法：

（1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

（2）布局时，设计图标注的尺寸除以100得到css中的尺寸，单位为rem，比如下图：

播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！

（4）font-size可能需要额外的媒介查询，并且font-size不能使用rem，如网易的设置：

@media screen and (max-width:321px){
.m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
.m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
.m-navlist{font-size:18px}
}




当deviceWidth大于640时，则物理分辨率大于1280（这就看设备的devicePixelRatio这个值了），也就是说当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽；

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';




对比iphone4和iph6下面两边的间距，4多很多，说明拉勾对4肯定是做过适配的，从代码也可以证实这一点：

不过如果你拿到的是根据4的设计稿，那就没有问题，比4分辨率大的设备肯定能显示根据4的尺寸做出来的东西。

还有一点，这种情况css尺寸单位用px就好，不要用rem，避免增加复杂度。




淘宝的这种做法：

（1）取一个75px的font-size为参照；

（2）设计稿竖直放时的横向分辨率为750px，为了计算方便，那么body元素的宽度就可以设置为width: 10rem，于是html的font-size=deviceWidth /10。这个deviceWidth就是viewport设置中的那个deviceWidth。

（3）设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。

devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等，我魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置：




在devicePixelRatio为2的时候，scale为0.5

在devicePixelRatio为3的时候，scale为0.3333

这么做目的当然是为了保证页面的大小与设计稿保持一致了，比如设计稿如果是750的横向分辨率，那么实际页面的device-width，以iphone6来说，也等于750，这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。




动态计算js设置viewport的方法如下：

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');




动态计算html的font-size的方法如下：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';




（4）布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10

（5）font-size可能需要额外的媒介查询，并且font-size不使用rem，这一点跟网易是一样的。

最后还有一个情况要说明，跟网易一样，淘宝也设置了一个临界点，当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，原因也是一样的，分辨率已经可以去访问电脑版页面了。




比较网易与淘宝的做法

共同点：

• 都能适配所有的手机设备，对于pad，网易与淘宝都会跳转到pc页面，不再使用触屏版的页面
• 都需要动态设置html的font-size
• 布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来，由于html的font-size是动态调整的，所以能够做到不同分辨率下页面布局呈现等比变化
• 容器元素的font-size都不用rem，需要额外地对font-size做媒介查询
• 都能应用于尺寸不同的设计稿，只要按以上总结的方法去用就可以了

不同点：

• 淘宝的设计稿是基于750的横向分辨率，网易的设计稿是基于640的横向分辨率，还要强调的是，虽然设计稿不同，但是最终的结果是一致的，设计稿的尺寸一个公司设计人员的工作标准，每个公司不一样而已
• 淘宝还需要动态设置viewport的scale，网易不用
• 最重要的区别就是：网易的做法，rem值很好计算，淘宝的做法肯定得用计算器才能用好了 。不过要是你使用了less和sass这样的css处理器，就好办多了，以淘宝跟less举例，我们可以这样编写less：

//定义一个变量和一个mixin

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}


//使用示例：

.container {
.px2rem(height, 240);
}


//less翻译结果：
.container {
height: 3.2rem;
}

以上部分摘自ulr：http://www.cnblogs.com/axl234/p/5156956.html

方法二

①定义基准值：html {font-size:50px}（设计图 width:640px 为基准）

html的font-size计算方式:当前设备宽度 * html基准值的font-size / 基准的设计图的宽度
@media screen and (min-width:320px) {html {font-size:25px}} 320 * 50 /640 = 25
@media screen and (min-width:360px) {html {font-size:28.12px}} 360 * 50 /640 = 28.125
@media screen and (min-width:375px) {html {font-size:29.3px}} 375*50/640 = 29.296875
@media screen and (min-width:384px) {html {font-size:30px}}
@media screen and (min-width:400px) {html {font-size:31.25px}}
@media screen and (min-width:414px) {html {font-size:32.34px}}
@media screen and (min-width:480px) {html {font-size:37.5px}}
@media screen and (min-width:540px) {html {font-size:42.19px}}
@media screen and (min-width:640px) {html {font-size:50px}}
@media screen and (min-width:720px) {html {font-size:56.25px}}
@media screen and (min-width:960px) {html {font-size:75px}}
@media screen and (min-width:1024px) {html {font-size:80px}}

②布局时，设计图标注的尺寸除以50得到css中的尺寸；单位为rem；

③部分margin、border和padding仍然用px为单位；




注意：rem参照html的font-size，所有的字体大小均相对于html元素；

em参照body的font-size，所有的字体大小均相对于父元素；

px换算成rem 所得rem = 实际px / 基准值