菜单

挪动端自适应方案

2019年2月27日 - 皇家前端

对应倍图

对此那或多或少,争议较多,因为一旦要水到渠成对应倍图的话,意味着图片都亟待做三份。花费太高了。

那里经常有三种做法

  1. 图表服务

    诸如在100×100的图片容器中。

1倍图 http:// img.xxx.com/abc.jpg\_100x100 2倍图 http://
img.xxx.com/abc.jpg\_200x200 3倍图 http://
img.xxx.com/abc.jpg\_300x300

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d5d723297616-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d5d723297616-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d5d723297616-1" class="crayon-line">
1倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-2" class="crayon-line crayon-striped-line">
 http:// img.xxx.com/abc.jpg_100x100
</div>
<div id="crayon-5b8f19d520d5d723297616-3" class="crayon-line">
 
</div>
<div id="crayon-5b8f19d520d5d723297616-4" class="crayon-line crayon-striped-line">
 2倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-5" class="crayon-line">
 http:// img.xxx.com/abc.jpg_200x200
</div>
<div id="crayon-5b8f19d520d5d723297616-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d5d723297616-7" class="crayon-line">
 3倍图
</div>
<div id="crayon-5b8f19d520d5d723297616-8" class="crayon-line crayon-striped-line">
 http:// img.xxx.com/abc.jpg_300x300
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 定死尺寸

    放弃1屏手机,全体启用2倍图,由于流量会损耗比较大(低端机),由此滚动加载等优化手段就会显得相比主要了。

试行1 – scale对倍图主要呢

这里看一下例外scale下图片的区别。

图片 1

测试结论:不同scale下使用不同图片差异相当的大。

而是此间须要表达,是还是不是不同scale同一图片分裂起到相对效能。

图片 2

实验2 – DownSampling

鉴于上一个实验最后的图样,使用同一scale下,区别倍数的图片,存在色差,那里说美赞臣(Meadjohnson)下。

 图片 3

图片尺寸: 400×300 , 300×225 , 200×150 , 100×75

测试环境: scale = 1.0

测试容器: 100×75的 img元素

是因为以前知道了Down萨姆pling概念的存在,那里只是好奇心驱动试验须臾间。(对自适应其实没有卵用)

DownSampling是说大图放入比图片尺寸小的容器中的时候,出现像素分割成就近色的景色。

测试结果:

图片 4

注:6plus貌似和别的机型分化。

触发情况: 不一致颜色像素接触的位置,会并发DownSampling。

图片 5

rem

对此rem要说的不多,看那张图。对于使用px的成分,使用rem统一去管理是很利索的!

图片 6

字体

不论选用动态生成viewport或许写死scale,字体都供给适配大屏。此前建议的rem方案被证实在差别手提式有线电话机上显得不平等,那里依然回归成了px。

px最好用双数

二种方案(那里不考虑媒体询问,因为Android碎..,嗯,不说了…)

  1. JS动态计算(常见做法)
根据不同屏幕宽度计算不同字号大小。 1.
定基准值,设计稿是750宽度(2倍屏),字体的大小是24px. 2.
计算指定宽度的字体大小。 var fontSize = width / 750 \* 24 ;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d62124238623-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d62124238623-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d62124238623-1" class="crayon-line">
根据不同屏幕宽度计算不同字号大小。
</div>
<div id="crayon-5b8f19d520d62124238623-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-3" class="crayon-line">
1. 定基准值,设计稿是750宽度(2倍屏),字体的大小是24px.
</div>
<div id="crayon-5b8f19d520d62124238623-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-5" class="crayon-line">
2. 计算指定宽度的字体大小。
</div>
<div id="crayon-5b8f19d520d62124238623-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d62124238623-7" class="crayon-line">
var fontSize = width / 750 * 24 ;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 根据dpr设定 (比较好的做法)

    ps : 一般时早先化时设置为根元素html的attribute,

JavaScript

window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d65248160001-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d65248160001-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d65248160001-1" class="crayon-line">
   window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)
</div>
<div id="crayon-5b8f19d520d65248160001-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>

然后css这样写



CSS

\[dpr=1\] { font-size=16px; } \[dpr=2\] { font-size=32px; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f19d520d69092077898-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f19d520d69092077898-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f19d520d69092077898-1" class="crayon-line">
[dpr=1] {
</div>
<div id="crayon-5b8f19d520d69092077898-2" class="crayon-line crayon-striped-line">
       font-size=16px; 
</div>
<div id="crayon-5b8f19d520d69092077898-3" class="crayon-line">
}
</div>
<div id="crayon-5b8f19d520d69092077898-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f19d520d69092077898-5" class="crayon-line">
[dpr=2] {
</div>
<div id="crayon-5b8f19d520d69092077898-6" class="crayon-line crayon-striped-line">
       font-size=32px; 
</div>
<div id="crayon-5b8f19d520d69092077898-7" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

布局

衡量之下,笔者认为flex真的灵活方便太多,因而那里给出七个搭架子demo。大约如下图。(画的相比较粗糙..)

(上稿下还原)

图片 7图片 8

骨干涵盖:

为什么flex可见形成百分比做不到的自适应。

比如咱们也去学Taobao,笃定认为步长就是375(魅族6尺寸),那么多少个成分flex分别为200和175。

不用计量比例,在不相同的界面上就会活动测算,而且以该浏览器能够辨其余矮小单位实现,比自身总括的百分比要精准。

图片 9

demo传送门

结论

  1. 写死initial-scale=1.0 对于完结1px问题,
    问题相比较大。与设计师沟通协商才是最好的消除难点的主意。
  2. 写死initial-scale=1.0 对于不一样图片的呈现,
    采纳分裂倍图的话,会有自然裁减,但在可承受范围内。(当然,动态生成scale能够周详呈现…)
  3. 布局

    万一运用动态生成viewport方案,就用到rem来还原设计稿(还有rem-px的一个钱打二17个结)。开销在效率上。

    借使选择写死initial-scale=1.0方案,就用flex布局,首要资本在flex兼容性上,可是落实13分灵活简单。

后记

viewport的scale的机要远比笔者想像的要低很多,小编原本认为那就是自适应。

可是后来发觉,其实自适应照旧回到了远古时代的百分比%,只是未来有更智慧更灵敏的方法flex,今后应有有五个趋势去自适应。

当今应用后者已经有无数的库能够消除包容性了,如参考能源最终的叁个flex库。

调查斟酌的网站并不多,可是百分比如故是累累人的首要选取。

参照能源

手淘ml库

手机天猫

天猫商城首页

举手投足端高清、多平适配方案

rem对webapp带来的熏陶

flex方案 适配到IE10+

 

 

2 赞 10 收藏
评论

图片 10

viewport缩放

对此地点的安装,再不相同的显示器上,css像素对应的物理像素具数是不雷同的。

在一般显示器下,dpr=1时,

一个css像素长度对应1个大体像素长度,三个css像素对应三个大体像素。

而在Retina屏幕下,如果dpr=2,

2个css像素长度对应三个大体像素长度,1css像素对应陆个大体像素。

那儿一经css中写

border: 1px solid red; // 此时1px 对应的宽度是2物理像素的宽度。

而一般今后活动端设计稿都以根据iphone设计的,稿子一般为750px或640px,那刚刚是iphone6和iphone5的大体像素。在布置稿中,一般不怎么边框效果,那时边框的线宽为1px,对应的就是1物理像素。而对于iphone5和iphone6,当width=device-width时,css的1px显示出来的是三个大体像素,所以看起来线就比较粗。怎么化解呢?1px边框效果实在有诸多hack方法,个中一种正是经过缩放viewport。

initial-scale是将布局视口进行缩放,initial-scale是绝对于突出视口的,即initial-scale=1与width=device-width是同等的法力。initial-scale=0.5等效于width=
2倍的device-width,所以设置initial-scale和width都足以转移布局视口的尺寸。

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

对此iphone6当添加如上设置后,initial-scale=0.5,即将页面减少2倍后十二分显示屏宽度。

布局视口width:
width / 2 = 375px; width = 750px;

就此此时布局视口为750px,此时1px相当1物理像素。


自适应必要从以下几个地点入手:
布局、字体、retina带来的题材

活动端自适应方案

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

原文出处:
大搜车前端共青团和少先队博客   

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

下一场交给主观的极品实践。

赶时间戳那里传送门

比较粗俗乏味的篇章,看前请喝水。

商讨样本

  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的直观感受图片 11

相同去展示 1 x 1 像素的点,即便在显示器上观看的分寸是千篇一律,但背后表现它的像素数量是见仁见智。

这也代表,在同样大小的面积内,愈来愈多物理像素的显示屏上显示色彩的能力越强。

但那不是本人要关爱的点,大家关切的是。

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

2. 切换scale的成本和回报

上面根据几个试验来回应那七个难点。

自适应难题

尝试1 - 有趣的事中的1px

大部交付要动态切换scale的说辞有以下五个。

  1. 1px并不是 [ 真实的1px ] , 2.
    为了丰硕利用屏幕的分辨率,使用符合显示器的图样。
1
2
3
1. 1px并不是 [ 真实的1px ] ,
 
2. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。
三 、设备像素比

设备像素比简称为dpr,其定义了物理像素和设施独立像素的照应关系

设备像素比 = 物理像素 / 设备独立像素
以iphone6为例:
iphone6的设备宽和高为375pt * 667pt,可以理解为设备的独立像素,而其设备像素比为2.固有设备像素为750pt * 1334pt

通过:window.devicePixelRatio获得。

配备像素比是分别是不是是高清屏的标准,dpr大于1时就为高清屏,一般情状下dpr为整数,可是android有个别奇葩机型不为整数。

方案优势:

1.引用简单,布局简便(只要把js代码贴到head标签里面,就能够运用了,设计稿一般是640
或许750的,不必要进行单位换算,直接用设计稿的尺码就能够,比如设计稿上有1个btn的冲天为80px,宽度为120px,高清方案私下认可1rem=100px,那么
btn的增长幅度就安装为:)

.btn {
    width:0.8rem
    height:1.2rem
}

2.基于设备显示屏的DPOdyssey,自动安装最合适的高清缩放。保证了分化装备下视觉感受的一致性。
旧方案,荧屏越大,成分也越大,新方案,荧屏越大,看到的越来越多
看得越来越多的知道:
比如,一篇相当长的稿子在ip4上,一屏盛不断那么多内容,而在ip6plus上,能够整个看领会,这是因为,新方案会基于dpr来缩放视口,大屏小屏的无绳电话机上,显示的字体大小都以相同的,当然在大屏上看出的东西就多咯~
3.可行解决移动端真实1px难题(那里的1px 是装备显示屏上的大体像素)

三、retina屏幕

当dpr为2的时候,1个虚幻像素要用到12三个大体像向来展现;当dpr为3的时候,二个虚无像素要用到13二个大体像一直显示。

retina屏带来的题材:

真实的1px

这一条和统一筹划稿密切想关,要研究它不能够撤销设计稿不谈。

此间先补一下切图课,倘诺协调要做1x , 2x, 3x 的设计稿。怎么样去实现?

尺寸!!!

多数动静下,设计师产出各个尺寸的稿子(事实上一般只是2倍稿子),都以先画出大尺寸的稿子,再去缩短尺寸,最后导出。
那样会拉动难题:

假定设计师在2倍稿子里画了一条1px的线,那时候借使大家要在scale=1.0里表现的话,就会化为0.5px,如下图。

图片 12

而非常的大学一年级部分部手提式有线电话机是无力回天画出0.5px的,因而那里一般有2个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或者导致局部地点和稿子出入较大,不可能复苏设计稿,界面包车型的士来得会收缩。

解决这一个难点的关键在于:交换

视口:

3.响应式做法

用部分css框架,比如bootstrap,或许jqueryUI,使用媒体询问,那种措施保证开销高,很少有重型网站采用那种布局(听说的)

总结:

Tmall方案lib-flexible使用了运用了动态viewport、rem布局、依据dpr动态生成字体大小(自行postcss)
能够参见以下小说:
https://github.com/amfe/lib-flexible
http://div.io/topic/1092
https://github.com/amfe/article/issues/17
http://huodong.m.taobao.com/act/yibo.html

实则有时候假诺对1px和高清图片供给不是很高,只要求考虑设置scale为1,然后选择flex,动态设置font-size即可

参考:http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/


连带基础知识:

  1. retina相关
    http://www.w3cplus.com/css/viewports.html
    https://github.com/riskers/blog/issues/17
    ①设备像素比(device pixel ratio ) = 物理像素(physical pixel) /
    设备独立像素(density-independent pixel)
    ②pc的viewport大小恒等于浏览器窗口的高低
    ③移动端的viewport分为layoutviewport和visualviewport,viewport的普陀山真面目是html成分的wrapper,它界定了html的宽度。可是viewport不在HTML范畴内,所以不得以由此html的css来安装viewport的幅度。layoutviewportde的暗中同意值一般在
    768px ~ 1024px 期间,最广泛的上涨幅度是
    980px。而visualviewport是控制meta viewport的scale程度的
    ④万一设置的meta viewport
    width=”device-width”,layoutviewport的肥瘦就会成为对应的情理大小(注意不是物理像素),那样就是美好视口,用户华为载进来的时候不要缩放来浏览。
    ⑤设置了initial-scale=1,就会触发width=”device-width”
    ⑥meta viewport的width的值是dip,就算它的值为“device-width”

  2. 加载相关
    ①onload和onpageshow的区分:当页面是从缓存中读取的,onload就不履行,而onpageshow照旧执行;
    ②document.readyState有三种意况:loading、interactive、complete
    ③domcontentloaded、onload的区别

叁 、理想视口:

布局视口即使缓解了移动端查看pc端网页的题材,不过完全忽视了手提式有线电话机自个儿的尺码。所以苹果引入了了不起视口,它对配备来说是最精良的布局视口,用户不需求对页面举行缩放就能到家的显示整个页面。最简易的做法便是使布局视口宽度改成荧屏的肥瘦。

可以通过window.screen.width获取。

<meta name="viewport" content="width=device-width">

活动端到底怎么适配不一致的显示屏呢?最简单易行的艺术是安装如下视口:

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

当使用上述方案定义布局视口时,即布局视口等于出色视口(显示器宽度),显示器没有滚动条,不设有高清屏下,字体较小的题材。不过在不相同荧屏上,其视觉宽度是见仁见智的,不可能差不离的将有着的尺码都安装为px,恐怕会产出滚动条。小尺寸的能够用px,大尺寸的只可以用百分比和弹性布局。

5.rem布局

rem是css3新引入的单位,在pc端会有包容性的标题,对运动端相比友好。一言以蔽之便是由此动态设置html根成分的fontsize,等比缩放成分大小来自适应移动装备。

翻了广大素材,po也测试过最好用方便的正是rem布局
,rem布局也有新旧版,这里讲最普用的Ali团队的高清方案,也是明天天猫m端使用的消除方案。
以下是宗旨js代码

! function(e) {
    function t(a) {
        if (i[a]) return i[a].exports;
        var n = i[a] = {
            exports: {},
            id: a,
            loaded: !1
        };
        return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
        value: !0
    });
    var i = window;
    t["default"] = i.flex = function(e, t) {
        var a = e || 100,
            n = t || 1,
            r = i.document,
            o = navigator.userAgent,
            d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
            l = o.match(/U3\/((\d+|\.){5,})/i),
            c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
            p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
            s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = 1 / s,
            m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
}]);
flex(100, 1); 

二、字体

1. 用到rem,设置条件font-size (有的说法说rem有难点)
能够设置动态基准font-size = clientWidth /
10,将clientWidth平均划成10份,模拟vw作为单位,弥补vw的兼容性

2. 基于dpr动态变化
用js判断出dpr之后,设置body的习性dpr,依照分化的dpr来安装分裂的字体大小

3. 依据设计稿的尺码
能够依照布置稿来设置基准clientWidth / designWidth *
designFontSize,然后使用css编写翻译工具来编写翻译。

tips:
方案1和方案2足以用postcss的px2rem齐声落到实处

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图