设为首页 | 加入收藏

欢迎访问幸运彩票官网app-幸运彩票官网33372-幸运彩票平台怎么样

幸运彩票手机版下载 >> 妖精的尾巴漫画-聊聊安卓折叠屏给交互规划和开发带来的改变

许多年前,前端同学都觉得PC端的适配(兼容处理)难,都认为移动端的年代适配会简略得多,也无需考虑那么多的作业。现实并非如此,移动端的年代相同面临着各种适配的处理。特别是刘海机的呈现,前端需求考虑刘海机适配。而现在跟着三星Galaxy Fold和华为Mate X折叠屏手机的问世,前端同学接着又要处理折叠屏幕的适配。

就咱们团队而言,在上个月就接到相关的通知,需求处理折叠屏的适配。碍于真机可贵,前段时刻就经过模仿机,做了一些简略的适配测验,不过走运的是,今日拿到了真机(三星Galaxy Fold) ,写了一个简略的Demo,做了一些适配的测验。特此将相关心得和咱们一同同享,期望对咱们有所协助。

折叠屏设备的相关参数

为了更好的做相应的适配处理,咱们有必要先对设备相关的参数做必定的了解。

简略地说,三星Galaxy Fold和华为Mate X的最大差异便是 双屏内折叠对单屏外折叠!

三星Galaxy Fold搭载了两块屏幕,一块坐落机身外侧的一边,适宜折叠情况下运用。这块外屏是一块4.6英寸1960 x 840 Dynamic AMOLED显现屏:

Galaxy Fold的另一块屏幕只要在机身被翻开时才会呈现。这块内屏尺度到达了7.3英寸,份额为4.2:3,分辨率为 2152 x 1536:

外屏的运用办法和现在手机相同,只不过小了些、边框宽了些。

内屏的大尺度则能在玩游戏、看视频、看地图、摄影和视频通话等情况下供给更多的内容显现。大尺度也让多使命处理不再是鸡肋,发布会现场展现的三使命一同处理让人形象深入。

华为Mate X的折叠选用了一块外置屏幕。彻底翻开时,呈现在眼前的是一块 8英寸、8:7.1的 2480 x 2200 OLED显现屏:

折叠起来后,一块大屏会变成两块别离坐落机身正、不和的“小”屏。正面屏幕为 6.6英寸,分辨率为2480 x 1148,份额为19.5:9,是现在干流手机的屏幕份额。反面的屏幕则是一块 6.38 英寸 2480 x 892分辨率显现屏,份额为25:9。

关于Web前端而言,咱们首要注重的几个参数是 分辨率、 DPI 和 屏幕宽度*等。简略的将相关参数列入:

有关于设备相关的参数,咱们能够经过相应的API来获取(这个很重要):

  • DPI:window.devicePixelRatio
  • UserAgent:window.navigator.userAgent
  • 屏幕宽度:window.screen.width
  • 屏幕高度:window.screen.height
  • 视窗宽度:window.innerWidth
  • 视窗高度:window.innerHeight

而屏幕尺度、分辨率、像素密度三者联系之间存在相应的核算联系:

比方屏幕分辨率为:1920px x 1080px,屏幕尺度为 5英寸的话,那么对应的DPI为440,即:

折叠屏给交互规划带来的差异化

不论是三星 Galaxy Fold的内折叠屏仍是华为 Mate X的外折叠屏给咱们最直观的作用相似于iPhone和iPad的差异:

折叠情况相似于iPhone;翻开情况相似于iPad。

屏幕宽窄的改动给咱们的交互规划也会带来相关的改动。

关于Web规划而言,当折叠屏从小屏形式改动成大屏形式时不应该仅仅画面的等份额变大,而是要考虑呼应式布局规划。描绘呼应式规划最著名的一句话便是:

“Content is like water,即假如将屏幕看作容器,那么内容就像水相同”。

在曾经呼应式规划更多用在PC Web规划上,但现在折叠屏手机的呈现,咱们在移动端也应该考虑呼应式规划,以下是规划时需求考虑的细节:

不是简略的呼应式规划

折叠屏幕在 “翻开”态时要考虑是平板形式仍是双屏幕形式,假如是平板形式,那么内容应该在一个全体里;若是双屏幕形式则能够考虑不同屏幕展现不同内容。规划时需求依据实践需求和场景进行形式挑选。

如上图所示,内容在同一个全体里,仅仅视觉(排版)作用上有差异。

或许

上两图展现了不同的屏幕展现不同的内容。

考虑经过Fragment(片段)来规划

Fragment是Android3.0提出的API,呈现的初衷是为了UI更灵敏地习惯大屏幕的平板电脑。

Android官方对Fragment的描绘是:

“Fragment表明Activity中的行为或用户界面部分。能够将多个Fragment组合在一个 Activity 中来构建多窗格 UI,以及在多个 Activity 中重复运用某个Fragment。

选用不同的Fragment来规划,能够做到不同内容在不同的屏幕展现,甚至在同一屏中能够展现多个不同的内容。关于这样的场景,交互的办法和行为都将会有所改动。比方进入每个不同的Fragment应该是怎样样的一个交互办法;比方回来按钮,滑屏等又是怎样一个交互办法。这全部都值得咱们去讨论。

比方说,很有或许将来手淘就能像下面这样,在翻开情况翻开多个Fragment:

参阅微软的UWP规划概念

UWP即Windows 10中的Universal Windows Platform(Windows通用运用渠道)。

UWP运用的理念并不是为某一个终端而规划,而是同一套代码和规划能够在所有Windows10设备上运转,包含Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。它的呼应式规划规划技巧包含以下6点:

下面的内容摘自《UWP 呼应式程序规划介绍》一文。

调整方位

你能够改动 UI 元素在不同屏幕上的方位。比方下面这个比方:为了确保一同展现两个元素,在手机上咱们有必要选用纵向翻滚界面,而在平板电脑上,咱们能够调整结构的方位,变为横屏翻滚界面。假如你用网格规划这些方位,你也能够不改动内容结构,但其他 UI 元素哋哒哋能够运用呼应式规划。

这是一个图片运用的比方,内容结构在大屏幕上被改动了方位。

调整尺度

你能够经过调整空白和 UI妖精的尾巴漫画-聊聊安卓折叠屏给交互规划和开发带来的改变 元素的尺度来优化结构,比方下面这个比方,能够经过简略的增大内容结构尺度来提高大屏幕的阅览领会。

调整次序

经过调整 UI 元素的次序和方向,优化内容显现作用。举个比方,在大屏上运转时,能够再添加一栏,而且参加分类列表,这些都是合理的。

这个比方展现了在手机上运用一栏纵向翻滚,而在平板上运用两栏横向翻滚的优化。

展现

你能够依据屏幕的实在巨细,设备支撑的功用,特定的情况或许屏幕方向展现界面。

下图是一个含有相机按钮的 Tab 的比方。平板电脑和台式机或许没有摄像头,所以相机按钮不被显现出来。另一个比方是媒体播放器,小屏幕上这些按钮一般是被删减的,但在大屏幕上这些按钮是被彻底保存的。PC 上的媒体播放器比手机上的有更多的功用。

换位

这项技巧是为特定屏幕尺度或屏幕方向切换特定的界面。下面这个比方是导航菜单:小屏幕上他是隐藏在汉堡菜单中纵向摆放的,可是在大屏幕上,更大的 Tab 是更好地挑选。

改动结构

你能够为特定的设备优化特定的结构。下面这个比方便是两种不同的接合结构。

下图是一个智能家庭程序,运用了改动结构的技巧

折叠屏下的手淘将或许是这样的

UWP规划概念是一个十分好的一个概念。假如不久的将来,折叠屏为成为一个干流之一的话,除了UWP规划带来的规划和交互的改动之外,还会有其他更优异,或更合理的交互规划概念吗?

或许简略地说,折叠屏年代的手淘将会是什么样的呢?

前面咱们说到两个(或多个)Fragment的规划,假如将来的App中能在宽屏形式(折叠屏翻开形式)启用多个Fragment时,咱们的交互规划可许将会是这样的。

在2019年愚人节当日,淘宝规划 提出了手淘在折叠屏下的概念规划。

在该文章中,作者提出折叠屏幕年代下,手淘App针对折叠屏的两大特性具体翻开相应的规划。

大屏内容更丰厚

在折叠屏中,顶部和底部导航性质的组件归于页面的共用功用,采纳直观的 横向拉伸适配办法;而傍边页面能够选用内容填充适配办法,将次级重要内容展现在第二屏。

有或许将来在音讯的第二屏内容是谈天窗口,能快速预览音讯里的最新内容,提高谈天切换的功率。

多使命功率提高

在日常运用手机处理主使命时,经常会碰到暂时通知音讯等分支使命处理,主使命与分支使命场景的频频切换给用户带来很高的操作本钱。

折叠屏的 “第二屏” 能够让用户能够不脱离当时场景即可快捷的处理子使命,提高多妖精的尾巴漫画-聊聊安卓折叠屏给交互规划和开发带来的改变使命的处理功率。下面举例淘宝上的事例协助咱们领会多使命带来的种种快捷。

比方说,在折叠屏翻开情况的形式下,你将能够一边看淘宝直播,还能够让宝物列表呈现出更大更多的图片以及扼要的信息协助用户做开端的判别,边看边逛互不搅扰。

折叠屏适配姿态

都说 底层修建将决议上层规划。这一点都不假。

在PC年代,许多前端开发者都疲于奔走处理各种不同版别浏览器客户端的兼容处理;在移动端年代,本来认为将会改动这一情况,现实并非如此。

跟着iPhone6,iPhone6+的呈现,不只限于处理不同屏幕的Android设备,还需求考虑杂屏年代的iOS设备。在那个时分规划和开发为了更好的适配,选用了一种适中的规划,比方手淘规划师和前端开发的适配协作根本思路是:

  • 挑选一种尺度作为规划和开发基准
  • 界说一套适配规矩,主动适配剩余的两种尺度(其实不只这两种,你懂的)
  • 特别适配作用给出规划作用

手淘规划师常挑选iPhone6作为基准规划尺度,交付给前端的规划尺度是按750px * 1334px为准(高度会跟着内容多少而改动)。前端开发人员经过一套适配规矩主动适配到其他的尺度。

开发人员针对该场景供给了不同的适配处理计划。比方事务较为干流的一种适配计划,经过lib-flexible库合作CSS的rem单位来做相应的等比缩放适配。

flexible.js计划也就手淘团队供给的一种优异的适配处理计划。即:《运用Flexible完成手淘H5页面的终端适配》

现实上,flexible.js计划(事务常称rem适配计划)根本原理是模仿视窗单位vw、vh、vmin或vmax原理。跟着视窗单位得到更多设备的支撑之后,许多团队开端弃用flexible.js的适配计划,而改用vw-layout的适配计划。

  • 再聊移动端页面的适配
  • 如安在Vue项目中运用vw完成移动端适配

vw计划(常称vw-layout计划)让咱们在移动端适配变得更为简略。

vw计划假如运用于PC端或许屏幕较宽的终端设备上,会有必定的缺陷。

但这全部并没有完毕。跟着苹果公司(Apple)的刘海机iPhone X、iPhone XS、iPhone XR、iPhone XS Max的呈现,不论是规划仍是开发又要开端面关于刘海机终端的适配处理。

到现在为止,尽管安卓也有许多品牌有相应的刘海机,但面临不同的App(或许说团队),安卓刘海机不会做相应的考虑。

在刘海机中(或许说iOS11起)提出一个安全区域的概念。规划师也针对安全区域做出相应的处理:

前端开发也有相应的特点env()来做相应的适配处理。有关于刘海机的适配,请移步阅览:

  • iPhone X的缺口和CSS
  • 手淘Web页面Bar和纵向适配的规划
  • 移动端上的规划和适配

而现在咱们又将不得不开端着手于折叠屏的适配处理。

华为折叠屏官方适配计划主张

折叠屏在视觉作用来说便是,屏幕变大了,手机变平板了。这样就要求咱们的APP在可折叠设备翻开时,当时运用页面有必要无缝延续到另一个屏幕,并可主动调整巨细匹配新的布局,反之亦然。也便是说,运用程序需求预备好在多个屏幕(不同分辨率、密度等)之间切换。

其实Google之前有其应对的战略,在上一年的 Android Dev Summit 上,Google 就现已宣告即将对折叠屏供给“Screen Continuity(屏幕连续性)”的原生体系支撑,并将这项技能称之为:Foldables。运用这种柔性显现技能,App 能够做到折叠屏设备上的适配作业。

现实上,华为官方针对折叠屏也供给了一些适配计划。

X 轴方向自习惯

尽量坚持Y轴方向上元素不变,X轴方向上自习惯:

该计划较 适用于界面元素相对单一,没有许多列表类、或较多显现元素的页面。

布局内容扩展

参阅 iPad(平板)布局显现更多内容,关于区分了手机和iPad布局的运用,在翻开态优先考虑参阅iPad的大屏布局适配翻开态界面,显现更多内容;尽量确保Y轴方向元素的不变:

该计划 一般适用于 WEB 类运用,页面特征一般为元素多,适配准则以尽量显现较多元素优先。

分栏布局

关于规划过分栏才能的模块,需求在翻开态表现分栏布局:

该计划 一般有显着 list 二级菜单的元素结构比较适宜。

反正屏布局共同

考虑到翻开态 8:7.1 的份额,翻开态的横屏和竖屏主张一套布局。反正共同;不对翻开态的横屏特别处理,移动布局不必表现。

假如细心比照,不难发现华为官方供给的适配计划(翻开情况形式)和 微软的UWP规划概念有些相似之处。

两个(或多个)Fragment规划

前面也说到过,在未来,折叠屏在翻开情况或许能够一同展现两个或更多个Fragment。关于这样的场景,前端或许规划都相对而言要更简略。由于多个Fragment更和咱们现在的适配办法挨近(未翻开情况,和现在干流移动设备相似)。当然,在翻开情况时,多个Fragment一同展现不同内容之时,或许每个Fragment所占屏幕的份额会有不同,针关于这种场景,咱们现在选用的vw-layout适配办法,将毫无压力。

不过,一同翻开两个或多个Fragment时,针对不同的场景在规划中也需求有所不同。比方说顶部Bar和底部Bar选用份额拉伸,中心主内容翻开多个Fragment,在不同的Fragment中显现不同的内容。

选用呼应式规划计划

有了解过呼应式规划的同学或许都知道,呼应式规划在PC上的客户端得到较大规模的运用场景。关于移动端上,呼应式规划的身影并不常见。但现在天,安卓折叠屏幕的呈现,或许在未来的一些Web运用或Web页面中将会看到呼应式规划的影子。

假如你决议在你的运用中选用呼应式规划来适配折叠屏翻开情况的作用,那么就有必要简略地了解一下呼应式规划的几个根本准则。

@Sandijs Ruluks早在2014年就针对呼应式规划提出九大根本规划准则。

呼应式 vs. 自习惯网页规划

许多初学都都简略把呼应式规划和自习惯规划混杂。现实上,它们看起来似乎是相同的,但现实并非如此。这两种办法相得益彰,并没有说哪个是正确的那个是过错的,内容决议全部。

内容活动

跟着屏幕尺度变小,内容将会占有更多的笔直空间,而下方的内容就会被接着往下推,这便是所谓的活动。假如你是运用像素或磅来进行规划的,这或许会有点扎手,可是当你习惯了之后,就会变得很有意义了。

相对单位

画布巨细能够是Desktop、Mobile或是它们之间的任何尺度。像素密度也或许有所不同,所以咱们需求灵敏的、在各种屏幕上都能够运用的单位。这便是相对单位(如%、vw等)派上用场的时分了。所以设置50%的宽度也就意味着它会占有屏幕(或视窗,即翻开的浏览器窗口的尺度)的一半。

在CSS的国际中,相对单位有多个,不同的场景都有其长处:

上面说到%来做适配处理并无大碍,但%的核算相对而言会较为蛋疼,幸亏的是,咱们能够选用视窗单位,比方vw、vh、vmin或vmax来代替%。

不论是%仍是视窗单位,它们核算办法都有所不同。他们也没有好坏之分,只要适宜不适宜之分。

在vw-layout适配计划,选用的便是视窗单位。

断点

断点是呼应式规划中一个十分重要的概念。它答应布局在预界说的点改动相应的UI风格。例如:PC端浏览器布局是三列,可是在手机移动端上只展现一列。大多数CSS特点能够依据断点改动。一般你会依据具体的内容来设置断点。

这儿所说的断点便是选用CSS中的媒体查询特性,但这样一来将会添加不少的代码量、开发本钱和保护本钱。

跟着技能不断的改造,CSS的特性也越来越强壮,就到现在为止,能够凭借CSS Grid、minmax()、repeat()、auto-fill和fr等特性,更易于完成呼应式作用。当然一些特别的场景仍是需求强度依靠断点(媒体查询)来处理。

min-width和max-width

前面说到过,在呼应式规划中,最为要害的便是条件CSS中的媒体查询,即@media。媒体查询能够有条件的运用CSS规矩,它通知浏览器应该疏忽或运用哪些CSS规矩,而这些都取决于用户的设备终端。

在媒体特性中,大多数的媒体特性都能够带有min或max的前缀,比方说min-width和max-width,用于表达 “最小的...” 或许 最大的...。用两张图来协助咱们来了解min和max的实践意义。

比方,设置width为100%,然后max-width是1000px,那么内容会填满屏幕,可是不会超越1000px。

嵌套目标

还记得相对方位吗?让许多元素的方位依靠于其它元从来定位是很难操控妖精的尾巴漫画-聊聊安卓折叠屏给交互规划和开发带来的改变好的,因而运用容器来包裹元素能够让它更易了解,也更整齐。这便是静态单位(比方像素)发挥作用的时分了。关于你不想要模块化的内容(比方logo或按钮),它们是有用的。

Mobile优先 仍是Desktop优先

从技能上讲,假如一个项目是从一个较小的屏幕开端,变成较大的屏幕(Mobile优先),仍是反过来(Desktop优先),并没有太大的不同。可是它仍是添加了额定的约束,能够协助你决议是否从Mobile优先开端。一般咱们在一开端的时分都会两头一同写,所以,仍是看看哪个运转起来更好。

网页字体 vs 体系字体

期望你的网站上有很帅的字体吗?能够运用网页字体!尽管它们看起来十分棒,可是记住字体放得越多,你加载页面的时刻也会越长。在另一方面,加载体系字体确是快如闪电,但当用户本地没有这套字体时,它就会回来默许的字体。

位图 vs 矢量图

你是否想过在图标上添加许多的细节和花哨的作用?假如想过的话,运用位图比较适宜。假如没有,能够考虑运用矢量图。关于位图,运用的是jpg、png或gif格局的图画,而关于矢量图,最好的挑选是SVG或图标字体。每个都有对应的优势和缺陷。可是图片的巨细也需求注重——网页上的图片有必要经过优化。另一个方面,矢量图一般比较小,可是一些旧版的浏览器不支撑。此外,假如它有许多曲线的话,它也或许会比位图要重。所以,稳重挑选。

有关于Web中图片或图标的运用,更具体的介绍能够阅览:

  • Web中的图标
  • 探究Web上图片运用办法
  • 图画优化

上面说到的九大根本准则,尽管提出的时刻早,但关于运用呼应式规划来规划Web页面或Web运用都具有极好的参阅。当然,时至今日或未来,咱们完成呼应式规划能够借用其他的一些CSS特性,会让咱们变得更为简略:

凭借calc()函数,vw等视窗单位,能够对font-size进行精准设置:

在不同巨细窗口下完成不同的字号。

经过CSS 的 grid布局、minmax()、repeat()函数、fr单位以及auto-fill(或auto-fit)再合作min-content、max-content、fill-content会让呼应式布局越来越简略。

vw-layout和媒体查询相结合

不论是华方官方供给的适配计划或是淘宝规划团队供给的折叠屏幕的规划概念仍是呼应式规划(或许说UPW概念),关于折叠妖精的尾巴漫画-聊聊安卓折叠屏给交互规划和开发带来的改变屏幕的适配都有不同的协助。

  • vw-layout布局能够让咱们简单地到达X轴方向自习惯或许反正屏布局共同或反正屏布局共同
  • 呼应式规划(凭借媒体查询)能够让咱们简单地到达布局内容扩展或分栏布局

假如选用多个Fragment来展现内容,那么vw-layout或其他的相对单位布局都能够十分简单的协助咱们完成折叠屏在不同情况的适配作用。

假如你只想同份额扩大,那么vw-layout也将是一个最佳计划。

假如你想在折叠情况和翻开情况有不同的布局风格,那么呼应式规划或许UWP概念将是不错的挑选。在这种场景之下,把vw-layout和媒体查询(呼应式规划)结合起来,将是最佳挑选。

创立新特点或提出新标准

刘海机的呈现,苹果公司针对该类型设备提出了env()函数和安全区域的概念。让咱们在处理刘海机适配的时分将变得更简略。

尽管env()开始只用于iOS的体系,但跟着这方面的需求更多,业界同行将该函数说到W3C标准的计划中,让其成为W3C标准。依据相同的一个概念,咱们是否也能够针对安卓折叠机,供给一个相似的函数或许特点。比方folding()。别的,关于移动端,咱们在媒体查询中orientation: landscape或orientation: portrait来判别设备是否反正屏。相同的原理,咱们是不是也能够凭借相似媒体查询这种办法来对安卓折叠屏做相似的设置呢?

咱们手淘 或许说集团许多App在安卓上都选用的是UC的内核,就算无法在W3C标准中推进,咱们UC内核的同学是否能够针对折叠屏供给相应的判别条件呢?等待UC同学能供给。

事例

自接到要适配安卓折叠屏的需求时,其实咱们团队在这方面的压力并不太大,由于咱们选用的是vw-layout布局计划,再加上咱们是Web页面(也便是咱们所说的H5页面),在这方面具有天然的适配功用。仅仅在翻开情况或许需求做一些细节化的处理。比方金币庄园:

凭借媒体查询,能够简单处理这样的细节问题。

别的为了更好的领会一下自己的主意:

vw-layout、grid和@media查询相结合,对三星折叠屏幕做相应的适配处理(华为还没有拿到真机)。

Demo在线作用能够点击这儿。

手淘卡片的布局:

最根本的计划是咱们团队一向运用的vw-layout布局计划,再合作CSS Grid:

.card {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-gap: 18px;
grid-auto-flow: dense;
}

假如不做任何处理,咱们在折叠屏两个情况下的作用如下:

假如咱们想让在翻开情况展现更多的内容时,或许说不同情况选用差异化的规划,那么咱们能够凭借媒体查询来处理。为了精准到达,先用JavaScript一些API获取设备相关参数:


输出咱们想要的数据:

凭借媒体查询,咱们就能够做咱们想要的作业:

@media only screen and (device-width: 320px) and (device-height: 747px) and (-webkit-device-pixel-ratio: 2.625){ 
body {
background-color: blue;
}
body::before {
content: '三星折叠机:折叠情况';
position: absolute;
top: 0;
left: 0;
z-index: 999;
background-color: rgba(0,0,0,0.3);
color: #fff;
}
}
@media only screen and (device-width: 586px) and (device-height: 820px) and (-webkit-device-pixel-ratio: 2.625){
body {
background-color: orange;
}
body::before {
content: '三星折叠机:翻开情况';
position: absolute;
top: 0;
left: 0;
z-index: 999;
background-color: rgba(0,0,0,0.3);
color: #fff;
}
#app {
grid-template-columns: repeat(auto-fill, minmax(22.6665vw, 1fr));
}
}

这个时分你看到的作用如下:

假如你稍加处理,还能够得到更不相同的布局:

凭借媒体查询来完成差异的规划,关于开发而言是较为蛋疼的,会添加不少的开发本钱和保护本钱。而助上面的媒体查询是只针关于三星折叠屏,但跟着更多折叠屏设备的呈现,作业会变得越来越困难:

所以咱们仍是期望有一个统一性的判别特点。

这个示例向咱们演示的是H5在三星中的适配。关于其他的折叠屏设备,咱们能够按相同的办法或原理来进行。

折叠屏设备调试

假如你没有真机的话,在调试折叠屏的时分能够选用模仿机:

能够运转相应的模仿机,比方华为Mate X模仿机:

假如你是运用Chrome进行调试,你还能够创立相应的模仿机。比方三星的UserAgent信息如下:

Mozilla/5.0 (Linux; U; Android 9; zh-CN; SM-F9000 Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.1.2.992 Mobile Safari/537.36

这样就能够创立折叠和翻开的两种情况:

这样就能够直接在Chrome中调试了:

关于其他折叠屏设备,假如你有相关的参数,也能够按上面相似的办法进行设备。

小结

仍是那句话,底层修建永久决议上层规划!不论年代怎样改动,做为技能人员都应该不断的去探究,寻觅相应或最佳的处理计划。

在这篇文章中,尽管咱们以折叠屏为主线进行翻开介绍,但全文除了折叠给咱们带来的改动之外,还介绍了呼应式规划、rem适配、vw-layout适配以及刘海机适配等计划。

现实上,这也是一篇有关于移动端适配大全或攻略。

最终期望该文对咱们有所协助。

作者:大漠



上一条      下一条
返回顶部