前言： chrome 谷歌瀏覽器預設的字體大小為16px；可以通過設置font-size來設置字體大小但是當設置到12px以下的時候字體大小不再改變；對於想設置其他大小的字體就很頭疼，本文參考網上的方法，並對該方法以及原理介紹；並對該方法的弊端進行闡述並提出一種合適的解決辦法 1.適用對象： blo ...
前言：
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中所有的元素都按照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>
