移动前端自适应解决方案

  1. 拉钩网 典型的弹性布局:关键元素高宽和位置都不变,只有容器元素在做伸缩变换
    文字流式,控件弹性,图片等比缩放
    0
    拉钩网:https://m.lagou.com/

2.网易 设置根元素html字体大小,使用rem,并用js计算不同分辨率下的html字体大小
使用rem布局结合在html上根据不同分辨率设置不同font-size,通过js计算出来的,所以当分辨率发生变化时,html的font-size就会变。
为了计算方便,取一个100px的font-size为参照,如设计稿的横向分辨率为640px,则body的width:6.4rem; 于是html的font-size=deviceWidth / 6.4。
这个deviceWidth就是viewport设置中的那个deviceWidth, 这个deviceWidth通过document.documentElement.clientWidth就能取到了。所以当页面的dom ready后,做的第一件事情就是:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 +’px’;
视口要如下设置:

meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。
网易:http://3g.163.com/touch/all?nav=2&dataversion=A&version=v_standard

3.淘宝 动态设置viewport的scale以及动态计算html的font-size
视口要如下设置:

meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

动态设置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');

device-width的计算公式为:
设备的物理分辨率/(devicePixelRatio * scale);devicePixelRatio称为设备像素比
动态计算html的font-size

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

布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
font-size可能需要额外的媒介查询,并且font-size不使用rem
淘宝:https://m.taobao.com/?sprefer=sypc00#index

灵孩儿官网上线步骤说明

整    理:张少康

时    间:2016-11-08

说    明:灵孩儿官网需求目前还有可能更改,所以将官网上线步骤整理出来

1.在本地安装个java环境(安装jdk,配置环境变量)
2.在cmd下 进入你这个文件夹 然后执行java的jar打包命令:jar -cvf LinkHealth.war *(ps:war的包名字一定要对)
3.把线上的下线,点Undeploy
QQ图片20161108153023
4.点击选择文件按钮
QQ图片20161108153029
5.选择第二步打好的war包,点击deploy
QQ图片20161108153034

注:
灵孩官网上线后台链接:http://www.linkhealth.cn/manager
用户:linkhealth
密码: link1234health