移动端rem结构的学习(基于自己写的一个网易云播放页面的思考)

作者:yingya英亚体育平台发布时间:2022-04-29 02:46

本文摘要:对于一个前端的初学者来说,首先要做好的事就是切页面了,切页面不得不说的就是结构了,结构的重要性不言而喻,为了良好的用户体验,提出了许多纷歧样的结构:响应式结构,弹性结构,流动结构等等,也流入出了许多的框架。最近在看关于移动端的响应式结构,其中涉及到比力多的就是巨细属性的设置:px、vw、vh、%、em、rem等等,今天自己就捋一捋rem的用法。

yingya英亚体育平台

对于一个前端的初学者来说,首先要做好的事就是切页面了,切页面不得不说的就是结构了,结构的重要性不言而喻,为了良好的用户体验,提出了许多纷歧样的结构:响应式结构,弹性结构,流动结构等等,也流入出了许多的框架。最近在看关于移动端的响应式结构,其中涉及到比力多的就是巨细属性的设置:px、vw、vh、%、em、rem等等,今天自己就捋一捋rem的用法。

说在前面一想到写移动端的页面,就要思量自己写的页面能够适应种种差别的移动设备,起初想想要做到感受好难啊,最初想到的就是用第三方的框架,用别人写的工具应该会很利便。然而万一不能用该怎么办啊,所以还是要学会自己写原生的页面结构,也就会有今天的这篇文章了。先看看自己用普通百分比、像素来写的页面和厥后改用rem写的页面的对比:普通百分百结构与rem结构的比力小分辨率(375*667)小分辨率(414*736)大分辨率简朴的对比下就看出了效果。

当不用别人的框架,该怎么去写。最容易想到的就是用百分比来写,这种写法对设备的宽度有用,宽度是牢固的,对高度不起什么作用,大部门人的做法就是宽度用百分来设置,高度用px来设置,但这种的做法体验并不是很好,用分辨率小的设备感受不是很差,一旦换成了分辨率比力大的设备效果就差许多了,大部门的标签元素都市被拉伸。高度牢固,换成了大的分辨率种种元素效果还是原来的,种种元素牢固了巨细,体验并不是很好。

yingya英亚体育平台

rem的使用rem是指相对于根元素的字体巨细的单元。简朴的说它就是一个相对单元,通过根元素举行适配的。

普通使用大部门是通过设置html的字体巨细就可以控制rem的巨细,例如:html的字体巨细为20px,那么就说20px为1rem,接下来的所有元素的巨细都基于这个比例来换算。这种的算法是存在问题的,当我们盘算页面的宽度rem值得时候都是使用某一款移动设备的分辨率来盘算的,下面的例子我用的是iphone6的分辨率375*667,它的宽度为375px,20px为1rem,那么375px就是18.75rem。看下面的代码:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <!--<script type="text/javascript" src="js/rem.js" ></script>--> <title></title> <style> html{ font-size:20px; } *{ border: 0; padding: 0; margin: 0; } #box1{ width: 18.75rem; height: 7.5rem; float: left; background-color: red; } #box2{ width: 18.75rem; height: 7.5rem; float: left; background-color: #00FFFF; font-size: 0.6rem; } #box3{ width: 18.75rem; height: 17rem; float: left; background-color: #B22222; } #box4{ width: 18.75rem; height: 20rem; float: left; background-color: #BFBFBF; } #box5{ width: 18.75rem; height: 22rem; float: left; background-color: cadetblue; } #input1{ width: 80%; height: 2rem; float: left; border-radius: 2rem; margin-left: 1.5rem; margin-top: 0.6rem; } </style> </head> <body> <div id="box1"> <input type="text" id="input1" /> </div> <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div> <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div> <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div> <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div> </body> </html>上面的代码在375*667的分辨率下恰好能够占满宽度,当你切换到其他的分辨率(如414*736)时问题就来了,看图:这个问题的原因很简朴,这种写法纵然用的是rem也起不来作用,宽度和高度都是牢固的,width为18.75rem就是375px,切换成其它分辨率(如414*736),它的宽度还是375px,空缺处还是显示出来了,许多人会认为可以把宽度设置成百分比的形式,或者用前言查询@media,或是viewport设置中的谁人deviceWidth()的方式来解决问题,固然这些方式均能解决宽度的问题,然而高度的问题又该怎么办呢?看下面:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> <!--<script type="text/javascript" src="js/rem.js" ></script>--> <title></title> <style> html{ font-size:20px; } *{ border: 0; padding: 0; margin: 0; } #box1{ width: 100%; height: 7.5rem; float: left; background-color: red; } #box2{ width: 100%; height: 7.5rem; float: left; background-color: #00FFFF; font-size: 0.6rem; } #box3{ width: 100%; height: 17rem; float: left; background-color: #B22222; } #box4{ width: 100%; height: 20rem; float: left; background-color: #BFBFBF; } #box5{ width: 100%; height: 22rem; float: left; background-color: cadetblue; } #input1{ width: 80%; height: 2rem; float: left; border-radius: 2rem; margin-left: 1.5rem; margin-top: 0.6rem; } </style> </head> <body> <div id="box1"> <input type="text" id="input1" /> </div> <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div> <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div> <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div> <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div> </body> </html>看效果:看图就知道了,宽度可以适应差别的移动设备,然而高度一直都没有发生变化,一直都是150px,页面效果并欠好看,分辨率大了,页面被拉伸,高度显得变小了。

正确使用动态盘算html的font-size,焦点是切换差别移动设备通过js获取设备宽度,然后按比例盘算html的font-size的值,动态变化。var d = document.documentElement;//获取html元素 var cw = d.clientWidth || 750; d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';上述代码解释:设计稿横向分辨率为375(iphone6),计划20px为1rem;结构的时候,各元素的css尺寸= 20 * (设备宽度/设计稿竖向分辨率)。完整代码:window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {//判断是屏幕旋转还是resize function c() { var d = document.documentElement;//获取html元素 var cw = d.clientWidth || 750; d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px'; } c(); return c; })(), false);上面的做法就可以动态的设置种种标签元素的宽和高,按比例的调试适应差别的移动设备。

例如下: 上面的代码中是以iphone6为设计稿的,box1的height为7.5rem(150px),如果切换成iphone6 plus的巨细,box1的height=(414/375)7.5=8.28rem,也就是8.2820=165.6px,与iphone6时的高度是纷歧样的,写页面时会越发的雅观。看效果:看上面显示的效果就可以看出来,和盘算出的效果是一样的,方法正确。以后可以用了。

yingya英亚体育平台

看看整体效果:页面元素完全没有被拉伸的效果,根据一定的比例缩放,保持页面效果雅观。作者:SongsongDeng链接:https://juejin.im/post/5a82b73af265da4e79101011泉源:掘金著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。


本文关键词:移动,端,rem,结构,的,学习,基于,自己,写的,yingya英亚体育平台

本文来源:yingya英亚体育平台-www.futurers.cn