移动端网页开发三（纠结适配的那些年）

时间 2019-11-10

标签移动网页开发纠结适配那些年栏目无线繁體版

原文原文链接

　　前面两篇文章介绍了移动端网页开发所要具有的基础知识。css

　　今天着重来说解移动端的适配方案。html

　　作PC端页面的工程师聊的最多的是兼容，这是由于浏览器之间的差别引发的。而移动端基本是没有兼容问题的，全是css3，简直不要太开心。前端

　　可是最明显的是适配问题。css3

　　什么是适配呢？作PC页面的时候，咱们按照设计图的尺寸来就好，这个侧边栏200px，那个按钮50px。但是，当咱们开始作移动端页面的时候，设计师给了一份640px的设计图。那么咱们如何把这份设计图实如今各个手机上的过程就是适配。web

　　我所接触过的适配方法，目前是三种，若是有朋友知道更多的，麻烦请补充指教，能够发送到本人邮箱1211050148@qq.com，共同窗习共同进步。浏览器

　　1️⃣固定高度，宽度自适应app

　　2️⃣固定宽度，viewport缩放布局

　　3️⃣rem作宽度，viewport缩放学习

　　举例说明：字体

　　1️⃣固定高度，宽度自适应

　　示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-height.html

　　这也是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。腾讯、京东、百度、天猫、亚马逊的首页都是使用的这种方法。

　　随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差很少，在哪一个宽度须要调整的时候使用_响应式布局_调调就行（好比网易新闻），这样就实现了『适配』。

　　原理：

　　这种方法使用了完美视口：

　　2️⃣固定宽度，viewport缩放

　　示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-width.html

　　设计图、页面宽度、viewport width使用一个宽度，浏览器帮咱们完成缩放。单位使用px便可。

　　目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同窗能够看看是怎么作的。

　　原理

　　这种方法须要根据屏幕宽度来动态生成viewport，生成的viewport基本是这样：

　　640 是咱们根据设计图定下的，0.5 是根据屏幕宽度动态生成的。

　　生成的viewport告诉浏览器网页的布局视口使用 640px，而后把页面缩放成50%，这是绝对的等比例缩放。图片、文字等等全部元素都被缩放在手机屏幕中。

　　这个gif图说明了一切：

　　3️⃣rem作宽度，viewport缩放

　　示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-rem.html

　　根据屏幕宽度设定 rem 值，须要适配的元素都使用 rem 为单位，不须要适配的元素仍是使用 px 为单位。　　

　　原理：

　　这么设置的好处是可让不一样设备的rem或px都显示同样的长度。

　　设置rem

　　设置rem的意义在于获得一个与屏幕宽度相关的单位，原本vw是最合适的，可是由于兼容性的问题，只能使用rem来作。这样，让不一样设备的rem显示同样的长度。

　　vw是CSS3引入的单位，1vw = 1%窗口宽度

　　上面的布局咱们能够这样：

html{

    font-size: 屏幕宽度 / 10;

}

.btn{

    width:8.75rem;

    height:1.25rem;

}

　　这样，不管屏幕宽度是多少，.btn都是相对于屏幕的这么宽，作到了适配。

　　设置 viewport 缩放和 data-dpr

　　这两个设置实际上是干的一件事，就是适配高密度屏幕手机的px单位。

.a{

  font-size:12px;

}

[data-dpr="2"] .a{

  font-size: 24px;

}

[data-dpr="3"] .a{

  font-size: 36px;

}

　　而缩放是动态的，这样，不一样设备下的px显示同样的长度。

　　以前说过CSS像素和物理像素与缩放、dpr都有关系，这里说明：

在普通手机上，.a字体设置为12px；

在dpr是2的手机上，[data-dpr="2"] .a字体为24px，又由于页面缩放50%，字体为仍是12px

　　关于这部分适配的JS文件本人有作收藏，由于我以为还须要细讲一下，因此我准备放在下一篇来说解。

　　最后打个广告，欢迎加入本人建立的前端qq群399627992，谢谢！