1、rem
#rem是相對於根元素的大小設定的，網頁中的根元素指的是html我們透過設定html的字體大小就可以控制rem的大小。舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html{
font-size:20px; }
p{
width: 600px;
overflow: hidden;
line-height: 1;
font-size: 1rem; }
</style></head> <body>
<p> 是啊啊啊
</p></body></html>當你在html根元素設定font-size:20px;的時候，1rem = 20px；同理，如果設定10px，那麼1 rem = 10px；rem不只是可以用於字體大小，也就可用於width等長度單位。這時你會問，這樣怎麼做到響應式呢？所以就要結合@media來設定html根元素的大小，這樣頁面裡所有對應的rem單位就會跟著根元素走，例如：html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
2、vw、vhrem單位雖然依舊很簡單了，但是依舊不夠簡單粗暴，還有一種更簡單的，就是vw、vh單位。
相對於視窗的寬度。視口被均分為100單位的vw。例如，1vw就相當於螢幕寬度的1%。直接上例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
width: 20vh;
height: 30vw;
line-height: 1;
font-size: 1vw;
background: #FC8B53;
color: #fff;
}
</style>
</head>
<body>
<p>
是啊啊啊
</p>
</body>
</html>這麼設定之後，p的寬度就隨著螢幕高度的變化而變化，它的高度就隨著螢幕寬度的變化而變化，字體的大小也隨著螢幕變化。我這麼搞是為了更直覺的表示vw這個單位的彈性。再也不用寫一堆連七八糟的@media了。 怎麼個靈活法呢？例如你設定一個p的寬度是螢幕的50%，那麼width就是50vw。這時候，你要設定它的高度是它的寬度的50%，如果不用vw咋辦？你只能用js去算算。但是用了vw就直接設定成25vw就搞定了。 但是這個有些相容性的問題，ios是沒有問題的，安卓手機自備瀏覽器要安卓系統4.4以上才行，別的瀏覽器都是可以的，只有自帶的有問題。 不過現在誰還用安卓自備的瀏覽器去耍呢，在哪裡都找不到。所以，直接用vw、vh吧。