来自 澳门威尼斯人平台 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

移动端自适应方案

移动端自适应方案

2015/09/14 · JavaScript, 基础技术 · 移动端, 自适应

原文出处: 大搜车前端团队博客   

前方依旧高能 ^_^ , 本文主要解决以下问题:

  • 真的需要动态生成viewport吗?
  • 如何自适应?

然后给出主观的最佳实践。

  • 最帅的flex

赶时间戳这里传送门

比较无聊干燥的文章,看前请喝水。

研究样本

  1. 手淘 ml.js
  2. 天猫首页
  3. 手机携程

一个月前去了css开发者大会,听到了手淘的自适应方案,想起之前一直就想了解ml.js到底干了什么事。回来仔细研究了一下,抱着好奇心一并看了同样类型的网站的方案,深入学习一下。

研究结论

  1. 手淘

    • 获取手机dpr(window.devicePixelRatio),动态生成viewport。
    • 换取手机宽度,分成10份,每一份的宽度即是rem的尺寸。
    • 根据设计稿尺寸(px)通过计算,转换成rem去布局。

    ps:海外淘宝并没有这样做,而是scale1.0并且图片大概都是2倍图。

  2. 天猫

    • 采用scale=1.0 写死viewport。
    • flex布局,笃定认为布局尺寸是375 (iPhone6)
    • rem 确定非flex的元素
  3. 手机携程
    • 采用scale=1.0 写死viewport
    • px + 百分比布局

实现之前

提及实现之前,先简单过一些概念。

完美视口

完美视口的概念已经街知巷闻了,如果不知道可以先戳这里。

在这几篇文章里,还会学会设备像素,css像素等概念,大神讲的很透彻,这里就不献丑了。

ppk 谈 viewport其1 ppk 谈 viewport其2 ppk 谈 viewport其3

这里给出完美视口

XHTML

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>

1
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>

在移动端,低端无定制的需求,都可以用这个完美视口完成。然而看到这篇文章的你,显然完美视口还不能满足。

dpr

dpr是devicePixelRatio的简写,也就是屏幕分辩比

历史原因,由于苹果retina的产生,使得清晰度提升,主要是因为`设备像素`提升了一倍,因此可以用更多像素去绘画更清晰的图像。#我乱说的#

1
历史原因,由于苹果retina的产生,使得清晰度提升,主要是因为`设备像素`提升了一倍,因此可以用更多像素去绘画更清晰的图像。#我乱说的#

坊间对于dpr更通俗的说法叫

  • 澳门威尼斯人平台,一倍屏
  • 两倍屏
  • 三倍屏

scale

scale是屏幕拉伸比。也就是视口上的initial-scale , maximum-sacle 等属性。

scale 和 dpr的关系是倒数。

1
scale 和 dpr的关系是倒数。

直观感受

这是我对dpr的直观感受澳门威尼斯人平台 1

同样去展示 1 x 1 像素的点,虽然在屏幕上看到的大小是一样,但背后表现它的像素数量是不同。

这也意味着,在一样大小的面积内,更多物理像素的屏幕上展现色彩的能力越强。

但这不是我要关注的点,我们关注的是。

1. 是否需要根据倍屏去切换scale达到伸缩的目的

2. 切换scale的成本和回报

下面根据几个实验来回答这两个问题。

自适应问题

实验1 - 传说中的1px

大多数给出要动态切换scale的理由有以下两个。

  1. 1px并不是 [ 真实的1px ] , 2. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。
1
2
3
1. 1px并不是 [ 真实的1px ] ,
 
2. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。

问题来源

传统web开发我们一般只需要用像素去描述dom的宽高,但考虑到移动端屏幕的尺寸千奇百怪,我们希望找到一种可以根据屏幕大小去自适应宽高的方案。

自适应需要从以下几个方面入手:
布局、字体、retina带来的问题

移动端rem自适应方案传送门https://segmentfault.com/a/1190000012225828

真实的1px

这一条和设计稿密切想关,要讨论它不能抛开设计稿不谈。

这里先补一下切图课,如果自己要做1x , 2x, 3x 的设计稿。如何去实现?

尺寸!!!

大多数情况下,设计师产出各种尺寸的稿子(事实上一般只是2倍稿子),都是先画出大尺寸的稿子,再去缩小尺寸,最后导出。 这样会带来问题:

如果设计师在2倍稿子里画了一条1px的线,这时候假如我们要在scale=1.0里呈现的话,就会变成0.5px,如下图。

澳门威尼斯人平台 2

而很大一部分手机是无法画出0.5px的,因此这里一般有一个hack

CSS

transform:scaleX(0.5)或transform:scaleY(0.5)

1
transform:scaleX(0.5)或transform:scaleY(0.5)

但是有人提出了, 既然可以改变viewport的scale达到合理利用不同倍屏的优势,为什么不这么写呢。

XHTML

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

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

等等,为了设计稿的尺寸我们如此大费周章?

事实上,即使2x设计稿避免了1px。3x设计稿也可能出现2px。

而且这里如果写死scale可能造成部分地方和稿子出入较大,无法还原设计稿,界面的显示会打折扣。

解决这个问题的关键在于:交流

  • 如果你的设计师是个要求严格,而且产品界面把控非常严格的话,应该动态去实现viewport或使用scale的hack去改变。
  • 如果部分区域实在没有必要[ 过度优化 ], scale=1.0 实在是非常低成本还原的方案,未尝不可。

原理

  • 除了font-size之外的其它css尺寸都使用了rem作为单位

一、布局:

1. 用%做单位
老方案,兼容性高
在制作落地页的时候,一般会有一屏展示的需求,就是不需要滚动就展示全部内容,我的解决方案是通过

html,body{height:100%} /*设置body高度为屏幕高度*/
.section-header{height:30%}
.section-content{height:60%}
.section-footer{height:10%}

2. 用flex方案 (推荐)
这里有兼容第一版本和第三版本flex的库 https://github.com/lzxb/flex.css
比%精准,而且灵活

3. 用rem做单位(不推荐)
需要设置基准font-size,见下面自适应字体的解决方案

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:移动端自适应方案

关键词: