pc端jquery项目开发总结

Posted 2020-12-10 fcn123

适配方面的问题:

1.测试问题：在大屏幕电脑上字体显示正常，小屏幕电脑字体显示太小。需求是不管设备屏幕大小，页面字体固定不变，始终是16px。

原因：

pc端使用了rem布局，字体也使用了rem为单位，所以字体会随设备屏幕大小而变大或变小。

解决方法：

pc端使用rem布局时，如果需求是页面字体固定不变，则字体需要使用px为单位。

2.问题：设备屏幕比较小时，个别图片大小不会变，页面布局变得混乱。

原因：

给图片使用rem设置了固定宽高，图片不会随网页窗口变化而变化。

解决方法：

给图片使用百分比设置宽高即可。图片的父元素宽度固定时，需要按照窗口的大小给图片设置绝对定位及宽高，此时保证离他最近的几级父元素没有相对定位。

逻辑方面的问题

3.需求：给后台管理系统所有页面统一添加水印。

出现问题：使用水印插件添加水印后，水印会显示在所有文字最上方，遮盖住文字和按钮。

原因：

插件里水印的层级被设置成为了最高。

解决方法：提高文字和按钮的层级。

可以获取页面所有的标签然后提高层级，此时会有一个问题，带有大片背景颜色的标签提高层级后会盖住水印。（比如按钮带有背景色，但是整个按钮需要提高层级显示在水印上方，表格table带有白色背景色，提高层级后会盖住页面大部分水印，需要让水印显示在table之上，又不遮盖文字。）所以需要排除掉页面中背景色为白色的标签，然后给获取到的其他标签添加class样式。

代码如下：

//样式部分

  .as {

        position: relative;

        z-index: 999;

      }

//js部分

  var arr = Array.from($("*"));

      arr.forEach((item) => {

        $(item).addClass("as");

        if ($(item).css("background-color") == "rgb(255, 255, 255)") {

          // 注意获取到的background-color和background值是不一样的，这里要获取的是background-color的值。（即使原来样式里写的是background也可以获取到background-color的值。）

          $(item).removeClass("as");

        }

      });