WEB端自适应尺寸的方法

移动端页面开发通常用的是rem单位来做不同分辨率屏幕的自适应，那我们怎么从UI设计稿的PX像素单位自动转换到rem呢？

我们写了一个方法来解决，只要输入设计稿的元素尺寸，就可以自动转换过来。

//宽度基准
!(function(win, doc) {function setFontSize() {var docEl = doc.documentElement;var winWidth = docEl.clientWidth;doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';}var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';var timer = null;win.addEventListener(evt, function() {clearTimeout(timer);timer = setTimeout(setFontSize, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(timer);timer = setTimeout(setFontSize, 300);}}, false)setFontSize();
}(window, document))

上述代码中的1080就是你设计稿设计的尺寸，根据不用的尺寸来填写，然后调用这个方法后，你页面所有的元素单位就会转换为rem，在页面具体中的用法就是，比如你设计稿的文字大小为12px,那么你在页面样式代码中就要写成0.12rem，以此类推，页面代码中的尺寸就是你设计稿中的原始尺寸除以100。

希望对你们有帮助。

WEB端自适应尺寸的方法相关推荐

bim 模型web页面展示_一种基于BIM模型的Web端轻量化展示方法与流程
本发明涉及基坑结构模型技术领域,尤其涉及一种基于bim模型的web端轻量化展示方法. 背景技术: 建筑信息模型(buildinginformationmodeling,bim)技术在土木工程领域快速推 ...
一种移动端自适应屏幕的方法
前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题的,今天给大家推出另外一种自适应不同移动端的方法,使用vw,vh单位. vw和vh单位的大小是多少? vw和vh是根据设备的宽度和高度来决定 ...
【RecordRTC Web端屏幕录制(VUE)方法】
完整代码如下: button使用了element-ui; <template> <div class="record-page"><div style ...
WEB视频自适应（上）
有时需要在web页面中载入视频,我们会用到HTML5视频播放器代码,如下显示: <video width="320" height="240" contr ...
【环信IM集成指南】Web端常见问题整理
1. 掉线之后,会有回调或通知吗? sdk有提供连接状态的回调监听初始化 [IM开发文档] 2. 怎么转发多条聊天记录? 挑选你要转发的消息内容然后以自定义消息或者ext扩展字段携带过去实现 3. ...
实现Web端即时通讯的四种方式
Web端即时通讯技术:即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的.但是在Web中,由于浏览器的限制,实现即 ...
轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...
PHP加载lod,面向大场景模型web端动态渲染LOD处理方法与流程
本发明属于计算机虚拟现实技术领域,具体而言是基于无人机采集的大场景图片进行建模,针对建模后的网格数据处理的方法,处理过的数据能够在web端无延迟加载并能够实时渲染. 背景技术: 近年来随着虚拟现实技术 ...

WEB端自适应尺寸的方法

WEB端自适应尺寸的方法相关推荐

最新文章

热门文章