IT技术浅谈
联系我们
主页 > IT技术浅谈 > IT技术浅谈

完整的REM布局的工作流程与规范,rem布局工作流程

时间:2019-01-15  编辑:AG88

完整的REM布局的工作流程与规范,亚虎娱乐官网rem布局工作流程

rem从去年的手淘双11开始火起来之后一直就想去使用,但是苦于学习途径有限,工作任务也比较繁忙导致一度延后。

那么现在对相关知识的学习与初步的项目实践之后,在这里记录一下使用rem解决各屏幕适配问题。废话不多说~~一步步来

 

首先是从设计师那边拿过来的设计稿可能是640,或是750的,这些都不重要。

然后我们要引用一个JS,adaptive.js 

github地址:https://github.com/finance-sh/adaptive,先从这人引用一段文字:

最最理想的解决方案当然是设计图和手机屏幕的像素点一一对应,就像我们在PC端所做的一样。拿750px宽的设计图来说,如果手机屏幕的水平分辨率是750px,那么这样是最理想最完美的,对于水平分辨率不是750px的屏幕呢?这个时候我们把设计图进行缩放,使其宽度刚好与屏幕的分辨率相等,即是等比例缩放设计图,使其宽度刚好覆盖手机屏幕。
如果我们使用<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport">这种常用标签,视觉同学经常会抱怨1px过粗的问题,这个时候我们需要缩放viewport来达到真正还原1px的效果。
开发的便捷性也是理想解决方案的一部分,大部分rem解决方案,是把设计图分成100份,1rem等于10份,总宽度10rem。如果设计图是750px,1rem就等于75px,切图的时候需要将px转换为rem,这个时候就需要用设计图的px值除以75得到rem的值,得到的rem值基本都是带几位小数的,虽然我们可以用less,sass这类css预处理语言来统一处理,但是如果我们让1rem等于100px,在切图的时候就可以更加快速方便了。比如设计图宽度为100px,css则书写为1rem即可。
要实现1rem等于设计图100px,页面的总的宽度就不是10rem了,而是随设计图的宽度而变化了。拿750px的设计图来说,总的宽度就是7.5rem。我们先根据设备像素比来缩放viewport,布局视口的宽度就调整好了,布局视口同样的宽度是7.5rem,我们就可以计算出html根元素的像素值,这样就大功告成了。
如果是文字,我们也建议使用rem。

对于iphone的retina高清显示屏,基本版本(adaptive.js)我们做了缩放处理,以达到最佳显示效果。 对于快速开发版本(adaptive-version2.js),viewport的width等于设备宽度,不会缩放
如果只是webview里,可以使用 adaptive-version3.js 在IOS和安卓下都会缩放,否则还是谨慎使用此版本,抱歉

至于这个JS主要用来动态计算相对不同的屏幕大小设置html的font-size的值,当然还有一点儿其他的,自己去了解哈。

 

接下来看这个

// 设计图宽度
    window['adaptive'].desinWidth = 750;
    // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem'
    window['adaptive'].baseFont = 28;
    /*
    // 显示最大宽度 可选
    window['adaptive'].maxWidth = 480;
    // rem值改变后执行方法 可选

开始根据PSD在JS里进行配置,我把这一块的配置直接放到JS文件里了,加载完就可以执行,实际项目中如下:

设置完了之后我们把基数(制作页面的时候一个参考项)定为100培训(别问为什么,因为个人觉得好用)。

实际“堆砖”过程当中是这个样子的。设计稿上我们看到一个div,用以前的写法假设是这样

div{

  width:200px;

  height:150px;

  margin:44px auto;

  padding:0 10px; 

}

那么你现在需要这样写

div{

  width:2rem;

  height:1.5rem;

  margin: .44rem auto;

  padding:0 .1rem;

}

写完了,就这样就可以了,那你本来的px值除以100,就是你要的rem的值。

针对1px的border问题,直接写1px就好了,因为就算你在缩小也小不过1px。

好了别看了,赶紧拿个设计稿来玩玩,再测一下不同的设备显示情况。

 

还是引用上面的那个部分兼容性解决方案:

1,部分chrome版本局部刷新时字体过大问题
插入数据后调用方法:
window.adaptive.reflow();
2,后端模板渲染是刚开始字体过大问题
可以给body设置一个初始字体大小值,就不会出现此问题了

 

有些坑可能没踩到,等我踩到了再及时更新哈。

 

有涵养的人都会带上出处。。。。。

 

 

http://www.bkjia.com/HTML5/1150259.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1150259.htmlTechArticle完整的REM布局的工作流程与规范,rem布局工作流程 rem从去年的手淘双11开始火起来之后一直就想去使用,但是苦于学习途径有限,工作任务...

本文源自: AG游戏网站

Copyright © 2005-2016 http://www.firebugkc.com AG游戏网站_亚洲最佳百家乐游戏平台_AG环亚集团_网易体育版权所有 AG游戏网站_亚洲最佳百家乐游戏平台_AG环亚集团_网易体育