移动端的适配(网易淘宝)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端的适配(网易淘宝)相关的知识,希望对你有一定的参考价值。

1.通用

html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

开发原则:文字流式,控件弹性,图片等比缩放。

2.网易

基于iphone4或者iphone5的设计稿,竖直放时的横向分辨率为640px,width: 6.4rem

html的font-size=deviceWidth / 6.4

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

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

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

(2)布局时,设计图标注的尺寸除以100得到css中的尺寸:

播放器高度为210px,写样式的时候css应该这么写:height: 2.1rem

(3)在dom ready以后,通过以下代码设置html的font-size:

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

(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}
}
(5)说明
a.视口设置
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

b.当deviceWidth大于设计稿的横向分辨率时,html的font-size始终等于横向分辨率/body元素宽
从手机访问网易,看到的是触屏版的页面,如果从pad访问,看到的就是电脑版的页面。如果你也想这么干,只要把总结中第三步的代码稍微改一下就行了:
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;
3.淘宝

(1)通过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‘);
(2)html元素的font-size的计算公式

font-size = deviceWidth / 10
最后还有一个情况要说明,跟网易一样,淘宝也设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会变化了,原因也是一样的,分辨率已经可以去访问电脑版页面了。
淘宝开源:https://github.com/amfe/lib-flexible
(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

(4)font-size可能需要额外的媒介查询,并且font-size不使用rem,这一点跟网易是一样的。

 

5. 比较网易与淘宝的做法


共同点:


  • 都能适配所有的手机设备,对于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;
}
 

以上是关于移动端的适配(网易淘宝)的主要内容,如果未能解决你的问题,请参考以下文章

第130天:移动端-rem布局

从淘宝和网易的font-size思考移动端怎样使用rem?

网易移动端适配

移动web终端 viewport设置

移动端高清适配布局开发解决方案

Vue 项目中的移动端适配方案