em是一个相对值，是相对于父元素的值。
body{ font-size:62.5%;/*10/16*100%=62.5%*/ } h1{ font-size:2.4em;/*2.4em*10=24px*/ } p{ font-size:1.4em;/*1.4em*10=14px*/ } li{ font-size:1.4em;/*1.4*?=14px?*/ }
rem -- “font size of the root element”. rem是相对于根元素<html>.
html{font-size:62.5%;/*10/16*100%=62.5%*/} body{font-size:1.4rem;/*1.4*10px=14px*/} li{font-size:1.4rem;/*1.4*1.=14px*/}
假设页面设计稿给我的时候是按照640宽度的标准尺寸给我的(html:10px)，怎么去计算不同宽度下font-size的值？举个例子：380/640=0.6，380是640的0.6倍，所以384宽度的页面的font-size也等于它的0.6倍，这时3984的html的font-size就等于12px，在不同设备的宽度计算方式以此类推。
html { font-size : 20px; } @media only screen and (min- 401px){ html { font-size: 25px !important; } } @media only screen and (min- 428px){ html { font-size: 26.75px !important; } } @media only screen and (min- 481px){ html { font-size: 30px !important; } } @media only screen and (min- 569px){ html { font-size: 35px !important; } } @media only screen and (min- 641px){ html { font-size: 40px !important; } }