rem计算适配
计算 适配 rem
2023-09-27 14:26:36 时间
建议在CSS引入之前引入下面这段JS代码,比例1rem:100px。
用了这个JS就不用在CSS内写N多个@media screenXXX了。
说明:
在html内最外层元素给max-width:640px,min-width:320px 元素宽高都以rem为单位就会自动缩放 字体大小一般0.2rem-0.34rem,如 h3:font-size:0.3rem,h4:font-size:.28rem,p:font-size:.2rem一般这几个够用了. 引入img标签时候该img必须float或者给一个属性(vertical-align: middle;display:block)否则其与父元素有20多px的margin-bottom 如img想自适应需要给个宽度,宽度可以百分比,可以rem为单位给固定宽度,比如img实际宽度100px,用此JS后想自动缩放,可以css里给该img{width:1rem},其他元素雷同。 如果有用到input时候,该input得浮动或者以rem为单位给固定宽度和高度,不然占据行高很大,出现元素占据位置大时候,float一下即可![复制代码](http://common.cnblogs.com/images/copycode.gif)
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = orientationchange in window ? orientationchange : resize, //orientationchange 事件是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。 //resize事件是屏幕缩放时候触发的事件 recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth =640){ docEl.style.fontSize = 100px; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + px; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(DOMContentLoaded, recalc, false); /*DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。 DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。 它的触发时机是:加载完页面,解析完所有标签(不包括执行CSS和JS), 并如规范中所说的设置interactive和执行每个静态的script标签中的JS,然后触发。 而JS的执行,需要等待位于它前面的CSS加载(如果是外联的话)、执行完成, 因为JS可能会依赖位于它前面的CSS计算出来的样式。*/ })(document, window);
适用于移动设备弹性布局的js脚本(rem单位) 背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了。
水灵儿 www.zyl.me 爱折腾,喜欢造,花起钱来毫不心疼,事后沉默一周... 极简主义者,主从事Web开发兼前端爱好者。 全栈开发尝试者、自媒体、极简主义者、爱心极客