css + javascript 完成html文件中文字随页面放大缩小

最近在搞一个web程序,写前端的时候发现前端数据写死之后,页面一缩小,排版就会乱,非常不美观。一下午都在搞这个问题(本人新手菜鸟一个,哈哈,轻喷)。经过尝试各种方法,在用纯css没有实现以后,又尝试了好多js的方法,总结了一套我自己的方法。以下分享给大家,希望有大佬能指点一下。

#time{
        font-size: 100%;
    }

以上是css代码,time是html里的一个标签的id。这里设置字体大小为百分比形式,我没有试过用em,rem,px可不可以,有兴趣可以试一试。以下是time的html代码。

2019.3.14

以下是核心的JavaScript代码。首先在onload函数里使用这个函数。 document.documentElement.offsetWidth的含义是返回html的宽度。对于数字1519,我是先用了alert(document.documentElement.offsetWidth)知道的,是我全屏时的html像素。这样每次都可以使用浏览器宽度来按比例缩小文字。为了更精确也可以使用浏览器的宽和高的像素之积与全屏时浏览器的像素之积的比值来缩小文字。*1是因为原来字体型号为100%,如果是200%则乘2最后再乘100。但是这样并不能完全按比例放缩。因为我尝试过,即使是全屏的时候,k的值也不为100,而是一百多一点点。所以这样的方法放缩过度也会排版混乱。我还没想出来为什么,因为这样的精度已经够我们的项目需要,所以我偷懒没怎么考虑。以后要是考虑了我会补上。

另外:在写fontSize的时候尽量用编辑器自动补全或者注意S为大写,苦逼的我找这个bug找了半天,内牛满面啊

window.onload = function(){
 p();
}
function p(){
  var w = document.documentElement.offsetWidth;
  var k=w/1519*1*100;
  document.getElementById("time").style.fontSize=k+"%";
}
window.onresize=function(){
laceholderPic();
}

 

你可能感兴趣的:(前端,javascript,css,html,html,css,javascript,文字随网页放缩)