>

运动端自适应方案

- 编辑:澳门新葡亰平台游戏 -

运动端自适应方案

对应倍图

对此那或多或少,纠纷很多,因为假如要水到渠成对应倍图的话,意味着图片都亟需做三份。成本太高了。

那边平时常有两种做法

  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下图片的歧异。

  • 测量试验样板:160×160凯尔特人队(Boston Celtics)标logo(一不当心暴光了鲜绿的血液)
  • 测量试验容器:160×160 img标签
  • 测验情形: intial-scale分别为1.0 / 0.5 / 0.3333
  • 图片尺寸: 1x(160×160) 2x(320×320) 3x(480×480)

澳门新葡亰平台游戏 1

测量试验结论:不同scale下使用不同图片出入超大。

不过这里供给证实,是不是不同scale同一图片差距起到相对成效。

澳门新葡亰平台游戏 2

  • 肉眼见到基本无区别,除了用取色器去获得,会意识有色差和生机勃勃部分像素被细分(上面会聊到),之外,用分歧scale呈现同风流倜傥图片宗旨未有啥分别。

实验2 – DownSampling

鉴于上叁个实验最终的图片,使用同风姿洒脱scale下,分歧倍数的图纸,存在色差,这里说美赞臣(Meadjohnson)下。

  • 测量检验方案

    测试图片:

 澳门新葡亰平台游戏 3

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

测试环境: scale = 1.0

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

由于以前知道了DownSampling概念的留存,这里只是好奇心驱动试验眨眼之间间。(对自适应其实未有卵用)

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可以完毕百分比做不到的自适应。

比方说我们也去学天猫商店,笃定以为步长正是375(One plus6尺寸),那么七个成分flex分别为200和175。

无须计量比例,在分化的分界面上就能活动测算,并且以该浏览器能够识别的细小单位实现,比自身计算的百分比要精准。

澳门新葡亰平台游戏 9

demo传送门

结论

  1. 写死initial-scale=1.0 对于实现1px问题, 难题十分大。与设计师沟通协商才是最佳的化解难点的章程。
  2. 写死initial-scale=1.0 对于差别图片的来得, 选取分化倍图的话,会有早晚减少,但在可选取范围内。(当然,动态生成scale能够完美呈现…)
  3. 布局

    借使利用动态生成viewport方案,就用到rem来还原设计稿(还应该有rem-px的乘除)。费用在效率上。

    固然应用写死initial-scale=1.0方案,就用flex布局,主要资本在flex兼容性上,可是完毕极度灵活轻便。

后记

viewport的scale的主要远比作者虚构的要低比比较多,作者原来感到那正是自适应。

可是后来发掘,其实自适应依然回到了三皇五帝的百分比%,只是今后有更精晓更加灵活的主意flex,以后应该有三个趋势去自适应。

  • 一个是拥抱vw,vh。(手淘的ml.js十等分宽度,1rem=10vw
  • 叁个是更加好的选用flex

今昔应用后面一个已经有好些个的库可以解决包容性了,如参照他事他说加以考察能源最终的五个flex库。

应用探讨的网址并相当的少,不过百分比仍是东食西宿人的首荐。

参照能源

手淘ml库

手提式有线电话机Tmall

Taobao首页

运动端高清、多平适配方案

rem对webapp带来的熏陶

flex方案 适配到IE10+

 

 

2 赞 10 收藏 评论

澳门新葡亰平台游戏 10

主题材料根源

历史观web开辟大家平日只要求用像素去描述dom的宽高,但想念到移动端荧屏的尺寸奇形怪状,大家希望找到风度翩翩种能够依附显示屏尺寸去自适应宽高的方案。

三、retina屏幕

当dpr为2的时候,一个浮泛像素要用到12澳门新葡亰平台游戏,2个概况像从来展现;当dpr为3的时候,四个虚无像素要用到133个轮廓像一向展现。

retina屏带来的难题:

运动端自适应方案

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

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

前方依然高能 ^_^ , 本文主要消弭以下难题:

  • 实在要求动态生成viewport吗?
  • 怎样自适应?

下一场交到主观的特等实行。

  • 最帅的flex

赶时间戳这里传送门

正如粗俗没味的稿子,看前请喝水。

商量样板

  1. 手淘 ml.js
  2. Tmall首页
  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. 为了充分利用屏幕的分辨率,使用符合屏幕的图片。

注:

  • 懒人能够采用Tmall的库
    https://github.com/amfe/lib-flexible
  • 使用 sublime 的同班能够下载 cssrem本条插件,令你编码速度快到飞起.
    参照这里 http://www.cnblogs.com/olivianate/p/5328716.html
{
    "px_to_rem": 108, # 一般设置为 视觉稿 / 10
    "max_rem_fraction_length": 2,
    "available_file_types": [".css", ".less", ".sass"]
}

一、布局:

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

真实的1px

这一条和筹算稿紧凑想关,要研讨它不能舍弃设计稿不谈。

此地先补一下切图课,假使自身要做1x , 2x, 3x 的设计稿。怎么样去落到实处?

尺寸!!!

大部处境下,设计师产出各样尺寸的稿件(事实上日常只是2倍稿子),都是先画出大尺寸的稿件,再去减弱尺寸,最终导出。 这样会带来难题:

假如设计员在2倍稿子里画了一条1px的线,这时候如果我们要在scale=1.0里表现的话,就能够化为0.5px,如下图。

澳门新葡亰平台游戏 12

而十分的大学一年级部分有线电话是无力回天画出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. 行使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联袂达成

方法

(1) 令页面宽度(device-width)等于设备逻辑像素,其中,device-width = 物理像素 / (dpr * scale) , 所以,大家只需依附手提式有线话机的 dpr 动态的去设置 scale

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]')
.setAttribute('content','initial-scale=' + scale + ', 
maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')

(2) 令页面 <html>font-sizefont-size = deviceWidth / 10 + 'px' .

document.documentElement.style.fontSize = 
document.documentElement.clientWidth / 10 + 'px';

(3) 总计成分的尺码
由此步骤二将视觉稿的页面分成10等分( 设置成10只是为着便利总计,这里实在能够筛选自身要分的份数 ),假使视觉稿是服从 360p 给的尺寸,那么大家 1rem 就表示 36 px , 那么当三个要素的尺码为 72px * 36px , 大家对此的rem尺寸应该是 2rem * 1rem
(4) 字体恐怕供给卓殊的媒体询问

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}

自适应要求从以下多少个地点开首:
布局、字体、retina带来的题目

① 图片高清难点

当一张位图的1个抽象像素用4个概况像素(dpr=2)体现的时候,每种物理像素须要取该颜色和亮度的相像值,所以会发出模糊的标题;相反,一张位图的4个抽象像素用1个轮廓像素显示的时候,图像展现的锐度会下跌(downsampling)。

技术方案:
1. 动态viewport (只消弭了blur的标题,而downsampling小编认为那么些一定会有啊?)
基于设备的dpr用图形服务器生成1x、2x、3x的图纸

2. 阿里lib.img
https://github.com/amfe/article/issues/8

主题材料延伸:icon的高清难点以致施工方案
https://github.com/amfe/article/issues/2

总结:

天猫商城方案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的拉长率就能够化为对应的情理大小(注意不是情理像素),那样正是理想视口,客商Nokia载进来的时候不要缩放来浏览。
    ⑤设置了initial-scale=1,就能够触发width="device-width"
    ⑥meta viewport的width的值是dip,纵然它的值为“device-width”

  2. 加载相关
    ①onload和onpageshow的差距:当页面是从缓存中读取的,onload就不施行,而onpageshow依然进行;
    ②document.readyState有二种情形:loading、interactive、complete
    ③domcontentloaded、onload的区别

② 1px问题

安装1px的时候,用了4个概略像素(dpr=2)浮现,会来得非常的粗

解决方案:
1. 见动态viewport
2. 设置transform scale

transform:scaleX(0.5);
transform:scaleY(0.5);

本文由前端php发布,转载请注明来源:运动端自适应方案