移动端rem自适应方案,移动端自适应方案

运动端自适应方案

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

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

前沿依然高能 ^_^ , 本文主要化解以下难点:

  • 移动端rem自适应方案,移动端自适应方案。的确须要动态生成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. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。

自适应需求从以下多少个地点下手:
布局、字体、retina带来的难题

题材根源

传统web开发大家一般只须要用像素去讲述dom的宽高,但考虑到活动端显示器的尺寸千奇百怪,我们期待找到一种可以依照显示器尺寸去自适应宽高的方案。

运动端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
    实在是相当低费用还原的方案,未尝不可。

一、布局:

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,见上边自适应字体的消除方案

原理

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

相关文章