移动端rem怎么用-创新互联
这篇文章给大家分享的是有关移动端rem怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
在凌源等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站制作 网站设计制作按需开发,公司网站建设,企业网站建设,成都品牌网站建设,成都营销网站建设,成都外贸网站建设公司,凌源网站建设费用合理。1、为什么要用rem
博客很久没写了,原因很简单。
最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了。
移动端最麻烦的是什么?
不同分辨率适配!
具体来说,有的屏幕320px宽,有的屏幕640px宽,有的更宽,如果你写固定px,那么要么小的放不下,要么大的有大片空白。
怎么办?
如果元素固定占用屏幕空间(一般是指宽度而非高度,下同)的百分之xx就ok了。
比如320px的10%是32px,640px的10%是64px,
如果10个10%宽度的元素放在一起,那肯定就是100%,即挤满屏幕(宽度),不会超出,也不会留白。
简单理解:
rem 就是指屏幕宽度的百分之x;
或者说,n个rem = 用户可视区域100%宽度
注意,之所以不说高度,是因为宽度(x轴)满了后,y轴(高度)方向的内容可以通过滚动屏幕来查看
上实例:
1、设计师给一个640px宽度的设计图,
2、你假定64rem=100%宽度(这里是640px),那么1rem=10px;
3、你照着写出了静态页面,然后按照1rem=10px的比例,将设计图上的元素的大小,全部用rem写下;
4、完美,你写的静态页面在640px宽度的页面上正常展示了;
5、A用户使用的是320px宽度的手机,因为你假设64rem=100%宽度,因此此时1rem=5px(320/64=5),于是也完美展示了;
2、rem怎么用?
rem是css单位;
1rem的大小是通过html下的font-size这个css属性告诉浏览器的;
使用替换px所在的位置即可
假定你预设在设计稿的时候 1rem = 10px;
然后一个元素(class=”ele”)的宽度是20px,高度30px(设计稿),
那么你的css这么写就可以了;
html { font-size: 10px; } .ele { width: 2rem; height 3rem; }
3、在任何分辨率下都适用
发现问题在哪里了么?如何确认1rem等于多少px?
原因是rem是css中使用的单位,css是不会帮你计算1rem是多少px的,只能通过你自己来计算。
计算方式很简单,简单来说:
1、你有一个设计稿A(假定640px),有一个预设的rem和px的比例B(假如是1rem = 10px)
2、获取用户浏览器的可视区域的宽度C(假如是320px),那么他此时1rem的尺寸D 可以根据 B/A = D/C 这个公式得知
3、原因是你假定屏幕可以容纳多少个rem,这是一个固定比例(如这里就是64rem)
1 rem = B / A * C; //代入可得 1 rem = 10px / 640px * 320px = 5px;
4、其他
1、用户加载完后,你就得设置好1rem的尺寸吧(记得是设置在html元素下的font-size);
2、假如用户屏幕的尺寸会变,你肯定得考虑吧(刷新1);
3、你懒得去找相应的代码,我总得给你吧(如下);
var fun = function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; //这里是假设在640px宽度设计稿的情况下,1rem = 20px; //可以根据实际需要修改 docEl.style.fontSize = 20 * (clientWidth / 640) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); } fun(document, window);
直接执行即可
感谢各位的阅读!关于“移动端rem怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页名称:移动端rem怎么用-创新互联
链接分享:http://myzitong.com/article/jdhis.html