antd option宽度自适应_前端基础：自适应布局之rem布局基础

Wowoy：https://juejin.im/post/5de72b1f51882512360d3910

开启一个移动端项目的基础，首先是想好如何在代码中实现移动端适配。之前没有经验，第一个项目里简单粗暴地采用px写死的方法，觉得不好，本项目采用的是像一位优秀同事习得的rem布局方法，它可以自适应不同屏幕尺寸的设备，简单好用。

这里我们要用到两种单位:

1.vw: viewport width，相对于视口的宽度；

1vw为视口宽度的1%，100vw为设备的宽度；

2.rem: 相对于根元素html的字体大小的单位；

比如2rem=2倍的根字体大小。

rem布局非常简单，其基本原理就是根据屏幕不同的分辨率,动态修改根字体的大小,让所有的用rem单位的元素跟着屏幕尺寸一起缩放,从而达到自适应的效果。

拿我的项目来举例:我们的设计稿是按照iphone6来设计的(iphone6实际宽度 375px)，而设计稿上的宽度是750px，之前是直接把所有尺寸/2，现在我会这样实现自适应：

html { //除以的7.5是根据设计稿的屏幕宽度来定的， //这样750px宽度下根元素字体大小则为750px/7.5=100px=1rem font-size: calc(100vw / 7.5);}

其中，100vw是设备宽度deviceWidth，这样就实现了不同设备宽度下，动态修改根字体font-size的大小，比如：

deviceWidth = 320，font-size = 320 / 7.5 = 42.6667px //iphone5deviceWidth = 375，font-size = 375 / 7.5 = 50px //iphone6,7,8 XdeviceWidth = 414，font-size = 414 / 6.4 = 55.2px //iphone6,7,8 plus

所以设计思路就是，根据设计稿将html的font-size设置为100px。比如750的设计稿，就除以7.5。

这样设计的原因是：实现适配只要在代码里把宽高直接将设计稿的尺寸除以100即可，换算很方便。

比方设计稿上宽高300px、96px的元素，就可以在代码中这么设置宽高

.test { width: 3rem  height: .96rem}//反过来验证下，iphone6，显示宽度为3*50px=150px

但是我们又不能改变默认字体大小的展示，因此还要加一句#app的字体大小重置

html { font-size: calc(100vw / 7.5);}#app { font-size: initial; //重置页面字体大小恢复为浏览器默认16px，否则就显示成50px了}

以上设计思路的最大优点就是：方便计算。

antd option宽度自适应_前端基础：自适应布局之rem布局基础相关推荐

bootstrap怎么在移动端横向布局_前端知道分享，移动端布局
一.下面我将简单的介绍移动端布局的八种方式: 1.固定布局 2.流动布局 3.浮动布局 4.定位布局 5.混合布局 6.flex布局 7.rem布局 8.响应式布局 9.**圣杯布局10.**双飞翼 ...
antd option宽度自适应_WordPress文章中添加自适应宽度的表格——墨涩网
WordPress文章中添加自适应表格,前面写文章的时候需要用到表格来表达阵列信息,但是在WordPress添加表格不想是在office中那样方便,需要借助插件或者代码才可以实现,今天分享一个不需要安 ...
html5如何利用rem实现自适应布局,使用Rem布局实现自适应
之前写过一篇移动端适配的文章,很长,内容太多,看得容易凌乱,重新写个通熟易懂版的. 为什么要自适应? 比如,对于一个移动端页面,设计师给的视觉稿画布宽 750,视觉稿中的一个黄色区块的尺寸是 702 ...
antd option宽度自适应_网站自适应模板是什么
新手经常会问:网站自适应模板是什么? 自适应模板就是"响应式布局",简单理解为:编辑好电脑版网站后,在手机.平板.其他设备上可以智能地根据用户行为以及使用的设备环境进行相对应的布局 ...
antd option宽度自适应_建议收藏：Axure手机自适应教程
hello,我又来啦,今天和大家分享用axure怎么做自适应,也就是说,我们做app端的作品时,怎么在不同的手机尺寸,显示最佳的样式.那么这期的话,我会以一个游戏的案例来展开,所以比较好玩.首先我会教 ...
antd option宽度自适应_Web移动端实现自适应缩放界面的方法汇总
作者 | 唐宋元明清2188来源 | http://www.cnblogs.com/kybs0/在开发App端的网页时,要适配iphone.ipad.ipod.安卓等各种机型,一般是直接使用em.px ...
tablewidget 行数自适应_控制|基于自适应遗传算法的增程式电动汽车能量管理策略优化...
点击上方蓝字关注我们! 摘要:建立增程式电动汽车整车仿真模型,以恒温器控制策略为例,以车辆最长续驶里程和百公里油耗为优化目标,利用自适应遗传算法对其能量管理策略进行了优化｡优化结果表明,采用自适应遗传 ...
前端宽度一至显示宽度不一致_前端怎么根据屏幕不同适配文字大小？
理论上讲,不同屏幕下显示同样文字大小和排版并非理智的选择. 如果初级的UI打算让你实现100%还原,那么ta的意思确实是需要在各个机型实现完美一致,但是稍微有点经验的UI都不会告诉你100%还原是包括 ...
jsp使用rem页面内容不能根据屏幕分辨率自适应_为什么很多web项目还是使用 px，而不是 rem？...
是不是当你接触到 rem 的时候,感觉 rem 很强大.但是自己接触到的公司项目全部都使用 px,是不是心里有一万个为什么?想知道吗?是你的公司技术更新落后了吗? 有这个疑问的小朋友,如果我没猜错的话 ...

antd option宽度自适应_前端基础：自适应布局之rem布局基础

antd option宽度自适应_前端基础：自适应布局之rem布局基础相关推荐

最新文章

热门文章