标签：浏览器 12px 谷歌 zoom transform rem font 实现需求 size

方法一、使用-webkit-text-size-adjust属性

如：div { -webkit-text-size-adjust:none;font-size:10px }

事实上，设置了这个属性后，并没有任何反应，无论是直接加在td上，还是加在body中。经查，在chrome29版本之前有效，之后的版本就不支持了。

2、使用transform来解决

如：transform：scale(0.8333)

这样确实能在一定程度上实现需求，但是除了在缩小字体外，也缩小了盒子的大小，如上图效果。所以这样就与背景色的需求冲突了，导致设置的背景色块也缩放了

3、使用rem的方式

如：设置 html{font-size:100px} span {font-size:0.1rem}

理论上是能够解决问题的，但是与我当前需求不匹配。第一，本项目pc端移动端均包含，所以rem可能存在兼容性问题。第二，当前项目实现方式，不好修改为rem的方式，需要改动内容较多。

4、使用zoom的方式

 如：td{font-size:12px;zoom:0.83}

完美实现需求，且没有transform的问题，不会导致盒子缩放。且PC项目环境使用谷歌浏览器，可以支持zoom属性，移动端经测试也兼容。

标签：浏览器,12px,谷歌,zoom,transform,rem,font,实现需求,size
来源： https://www.cnblogs.com/camile/p/16465915.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。