【怎么缩小复制网页段落】使用Rem按屏幕宽度比例缩放网页内容

每当在移动端使用主页时，有时需要与多种屏幕大小兼容。

认识Rem后，我觉得不错，所以决定试一试。

1rem的长度等于html的font-size大小，默认浏览器的html的font-size为16px。

一般情况下，1rem=16px(铬默认字体大小的下限为12px)；

如果想根据屏幕大小放大和缩小网页内容，首先必须找到基准值。已确定屏幕宽度为320px，html的字体大小为10px等基准值。此时1rem=10px

随着屏幕宽度的不断变化，您只需更改html的字体大小。

这是方程式。

默认html的字体大小(10)/基准屏幕宽度(320)=实际html的字体大小/实际屏幕宽度

有这个方程式就好办。

加载页面时，如果立即导入实际屏幕宽度，则可以根据上述等式计算实际html的字体大小，在这种情况下，页面上使用rem单位的内容的实际大小也会发生变化。我写了函数。

Var setFontSize=function(){

Var width=document.documen//获取页面显示宽度

If(宽度320) {

Var w=宽度/32

var html=document . getelementsbytagname(' html ')[0]；

=w ' px

}else{

//alert(“不支持此屏幕大小”)

}

}

加载页面时使用此方法。

Window.onload=function(){

SetFontSize()；

}

屏幕放大和缩小时也可以使用此方法。

Window.onresize=function(){

SetFontSize()；

}

这使您可以根据屏幕宽度按比例缩放网页内容。

本演示的代码如下：