前言：
chrome
谷歌瀏覽器默認的字體大小為16px；可以通過設置font-size來設置字體大小但是當設置到12px以下的時候字體大小不再改變；對於想設置其他大小的字體就很頭疼，本文參考網上的方法，並對該方法以及原理介紹；並對該方法的弊端進行闡述並提出一種合適的解決辦法
1.適用對象：
block 或者inline-block類型;
2.方法(該方法先以p標簽舉例)：
方法：通過設置transform：scale();
局限性：標簽會發生移動(可以參考下面的代碼和圖片)；
解決辦法：設置transform-origin；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; } </style> </head> <body> <p> 我是p </p> </body> </html>
可以發現默認的是16px；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; } p{ -webkit-transform:scale(0.8); } </style> </head> <body> <p> 我是p </p> </body> </html>
可以發現當設置0.8的縮放比例的時候；得到的字體大小:16pxX 0.8 = 12.8px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; } p{ font-size: 10px; -webkit-transform:scale(0.8); } </style> </head> <body> <p> 我是p </p> </body> </html>
當在p中設置font-size:10px的時候比例縮放就以10px進行縮放;
(可以看到設置縮放之后標簽發生移動，這個在下面會說到解決辦法）
p中所有的元素都按照p的縮放比例進行縮放；
3.原理:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; } p{ width: 300px; height: 300px; -webkit-transform:scale(0.8); border: 1px solid red; } .a{ width: 300px; height: 300px; border: 1px solid red; margin-top: 10px; margin-left: 10px; } </style> </head> <body> <div class="a"> <p> 我是p </p> </div> </body> </html>
當對p加父容器和對p本身設置寬高以及邊框；設置scale0.8，p標簽自動上下居中(自身原來的寬高-縮放后的寬高得到的寬高平均分配到上下左右)；
用chrome自帶的盒模型發現，p標簽內容占據寬度依舊是300px X 300px；
當在p后面（div中）加入span元素發現span出了div的范圍，說明等比縮放只是改變的原來標簽形式上的大小；其原來所在文檔流占據的空間位置並未因縮放而騰出來;
發現改變p的位置之后span仍然被擠出來。
該方法原理及總結:
1.設置scale時時對整個p標簽進行縮放(包含p本身及其內容的所有元素)，而不單單是對字體的縮放；
2.進行縮放之后會將縮放之前的寬高-縮放之后的寬高的值自動分配到p標簽的上下左右；但縮放並不會改變該標簽原來在文檔流中所占據的位置大小；不會因為縮放而騰出空間；
3.縮放后，縮放對象的位置會發生變化；
4.也是scale不適用於inline類型元素的原因(不能設置寬高；雖然自己的寬高靠內容撐起來;但是在設置css的時候無法獲取寬高的准確信息(我是這么理解))；所以如果想要設置inline類型的font-size需要先設置display：block或者inline-block。
4.解決辦法(解決偏移問題)：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; } p{ width: 300px; height: 300px; -webkit-transform:scale(0.8); -webkit-transform-origin: 0 0; border: 1px solid red; } .a{ width: 300px; height: 300px; border: 1px solid red; margin-top: 10px; margin-left: 10px; } </style> </head> <body> <div class="a"> <p> 我是p </p> </div> </body> </html>
在縮放對象上加入：
-webkit-transform-origin: 0 0;
或者
-webkit-transform-origin-x: 0;
-webkit-transform-origin-y: 0;