原生页面响应式布局（rem）

注意：rem是依赖根元素的font-size

本文以版心为1200px为例

首先为了方便计算，推荐依据原尺寸将根元素的font-size设置为100px

行内块元素带有的间隙会被放大，需要手动清除间隙：

第一步：给该行内(块)元素的父元素设置：font-size:0;

第二步：然后给子元素单独设置 font-size 即可

响应式改变 font-size 的js代码如下：

//按照宽度1920图算， 1rem = 100px;
(function(win, doc) {let wid = null;function changeFontSize() {wid = doc.documentElement.clientWidth;// 设置一个最小宽度if (doc.documentElement.clientWidth < 1200) {wid = 1200;}doc.documentElement.style.fontSize = wid / 19.2 + 'px';}changeFontSize();win.addEventListener('resize', changeSize, false);})(window, document);

将此段代码放在一个单独的js文件里，每个html文件都引入即可

注意：

此js文件需要放在 head 中引入，否则在页面载入时会出现字体堆积现象

此js文件需要放在 head 中引入，否则在页面载入时会出现字体堆积现象

此js文件需要放在 head 中引入，否则在页面载入时会出现字体堆积现象

 在初始化文件init.css中需设置一个最小宽度

html,
body{width:100%;min-width:1200px; // 可自行调整最小宽度
}

设置元素样式时将 px 值换算成 rem 即可

例：width: 520px;  ===> width: 5.2rem;

这就是全部步骤了，简单又方便！！！ 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！