1rem 等于 文档流的font-size
通过修改 html的font-size实现自适应
假设
屏幕宽度为 750 clientwidth
设计稿宽度 750 materialWidth
将设计稿与当前设备比例放大100倍关系赋值给html，
则 1 rem 就等于 (设计稿与当前设备比例 * 100)html值则
实际值（rem） =100* 比例 * 设计稿像素
所以为了较好的计算，建议采用开发选用的屏幕分辨率与设计稿一致以 1比1 计算。
例如：
750px的设计稿，开发屏幕750px，使得 1rem 等于 100px, 100%宽度就为 7.5rem;
320px的设计稿，开发屏幕320px，使得 1rem 等于 100px, 100%宽度就为 3.2rem;
以此类推。。。
所以取值为 设稿大小 除于 100，例如：
设计稿宽度为 200px，则rem取值为 2rem
以此类推。。。
注意浏览器支持文字最小像素,所以在 比例中 乘 100，避免rem布局错乱const flxeJs = function (doc, win, materialWidth){
materialWidth = materialWidth || 750
const docEl = doc.documentElement
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = function(materialWidth){
var clientwidth = docEl.clientWidth
if(!clientwidth)return;
docEl.style.fontSize = 100 * (clientwidth / materialWidth)+ 'px';
}.bind(null,materialWidth)
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc, false);
doc.addEventListener('DOMContentLoaded' , recalc, false)
}
export default flxeJs 赞 (0)
相关推荐
-
视频无法播放是怎么回事（教你4个格式转换方法步骤）
现在在网上保存的视频会有各种各样的格式，而手机或者电脑的视频播放工具的兼容性并没有那么好，也就导致了很多视频无法打开播放，这个时候就需要将它们的格式进行转换。 下面我来分享4个简单的视频格式转换方法，一...
-
android仿微信朋友圈动态（安卓仿微信朋友圈图片查看效果）
概述 目前的app的动画效果是越来越炫了，很多主流app的图片预览返回都有类似功能，比较常见的是ios自带相册，微信朋友圈等等。自己项目中也有类似功能，最近整理了一下这个功能的代码，做个笔记记录。 网上已经有对...
-
amd显卡和英伟达显卡有什么区别（英伟达 amd显卡区别）
英伟达显卡和AMD显卡如何选择，他们的区别是什么 在如今CPU上已经是英特尔和AMD两强争霸，已经在桌面市场几乎垄断，而英特尔处理器又在桌面以及服务器处理器上一直领跑全球电脑性能走向，相比AMD一直被英特尔按在地...
-
服装店铺开店计划（服装店开店流程,值得收藏）
创业变得越来越流行，如何选址一个靠谱的项目变得十分重要。在服装行业，女装是公认最好做的，女人天生是感性的，只要有机会，买买买就占据了她们生活中的很大一部分，那么选择开女装店创业的流程是什么样的呢？ 1、...
-
realme真我GT2首发价格（realme 真我GT Neo2价格）
今晚，realme 真我手机发布了GT2系列新品手机。 设计方面，GT2系列采用生物基材料和纸压工艺，还原了纸的纹理、颜色和手感；新一代AG玻璃工艺，用玻璃打造金属质感；提供四种配色；使用全新环保包装，使用塑料低至0....
-
最好用的压缩工具（压缩工具推荐）
日常工作或学习中可能会接触到的文件压缩，包含图片压缩和视频压缩。如何让图片、视频保持清晰，同时又让其体积尽可能的小？ 今天和大家分2个好用的压缩工具，一起来看看吧！ 图片压缩 docsmall 这是一款在线图片压...
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。