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

Posted SteveJin

tags:

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

 

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

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

  做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的。而移动端基本是没有兼容问题的,全是css3,简直不要太开心。

  但是最明显的是适配问题。

  

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

  

  我所接触过的适配方法,目前是三种,如果有朋友知道更多的,麻烦请补充指教,可以发送到本人邮箱1211050148@qq.com,共同学习共同进步。

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

  2️⃣固定宽度,viewport缩放

  3️⃣rem做宽度,viewport缩放

 

  举例说明:

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

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

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

   随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用_响应式布局_调调就行(比如网易新闻),这样就实现了『适配』。

  

  原理:

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

  <meta name="viewport" content="width=device-width,initial-scale=1">

  

  2️⃣固定宽度,viewport缩放

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

  

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

 

  目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同学可以看看是怎么做的。

  

  原理

  这种方法需要根据屏幕宽度来动态生成viewport,生成的viewport基本是这样:

  <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

  

  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 为单位。  

  

  原理:

  

  1. 动态生成 viewport

  2. 屏幕宽度设置 rem的大小,即给<html>设置font-size

  3. 根据设备像素比(window.devicePixelRatio)给<html>设置data-dpr

  这么设置的好处是可以让不同设备的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,谢谢!

   

  

 

  

  

以上是关于移动端网页开发三(纠结适配的那些年)的主要内容,如果未能解决你的问题,请参考以下文章

移动端H5网页开发必备知识

HTML网页如何完美的适配到移动设备上

探究移动端开发

认识移动端开发

探究移动端web开发

前端技术栈都有哪些