时间：2023-09-05 23:54:01 | 来源：网站运营
时间：2023-09-05 23:54:01 来源：网站运营
自适应网站页面适配实现和基本原理讲解：随移动端设备的普及，移动web网站成为了前端工程师工作主攻点
在线咨询
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">自适应工作原理也比较简单<div class="div"> <div class="div1">div1</div> <div class="div2">div2</div></div>.div { width: 100%; overflow: hidden;}.div1 { width: 20%; height: 50px; float: left;}.div2 { width: 50px; height: 50px; float: right;}由于父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸(function(doc, win) { var docE1 = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docE1.clientWidth; if (!clientWidth) return; docE1.style.fontSize = 15 * (clientWidth / 375) + 'px'; // 转化为25rem }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);原创文章链接:https://www.toutiao.com/i6881889214640685571/关键词：实现,基本,原理,讲解,适应
