标签：体会 页面布局 开发 add 百分比 提高 round reac 宽度
适配方面的问题:
1.测试问题：在大屏幕电脑上字体显示正常，小屏幕电脑字体显示太小。需求是不管设备屏幕大小，页面字体固定不变，始终是16px。
原因：
pc端使用了rem布局，字体也使用了rem为单位，所以字体会随设备屏幕大小而变大或变小。
解决方法：
pc端使用rem布局时，如果需求是页面字体固定不变，则字体需要使用px为单位。
2.问题：设备屏幕比较小时，个别图片大小不会变，页面布局变得混乱。
原因：
给图片使用rem设置了固定宽高，图片不会随网页窗口变化而变化。
解决方法：
给图片使用百分比设置宽高即可。图片的父元素宽度固定时，需要按照窗口的大小给图片设置绝对定位及宽高，此时保证离他最近的几级父元素没有相对定位。
逻辑方面的问题
3.需求：给后台管理系统所有页面统一添加水印。
出现问题：使用水印插件添加水印后，水印会显示在所有文字最上方，遮盖住文字和按钮。
原因：
插件里水印的层级被设置成为了最高。
解决方法：提高文字和按钮的层级。
可以获取页面所有的标签然后提高层级，此时会有一个问题，带有大片背景颜色的标签提高层级后会盖住水印。（比如按钮带有背景色，但是整个按钮需要提高层级显示在水印上方，表格table带有白色背景色，提高层级后会盖住页面大部分水印，需要让水印显示在table之上，又不遮盖文字。）所以需要排除掉页面中背景色为白色的标签，然后给获取到的其他标签添加class样式。
代码如下：
//样式部分
标签：体会 页面布局 开发 add 百分比 提高 round reac 宽度
原文地址：https://www.cnblogs.com/fcn123/p/13097769.html
