1、前言
（1）vw/vh介紹
在使用之前，我們先簡單了解一下什么是vw和rem以及它們的作用，vw是css3出現的一個新單位，它是“view width”縮寫，定義為把當前屏幕分成一百份，1vw即為屏幕的1%，與之對應的是vh，把高分成一百份，1vh即為屏幕高的1%，一般我們常用的vw單位來完成響應式開發
（2）rem介紹
rem是相對長度單位。相對于根元素(即html元素)font-size計算值的倍數，比如你html設置的字體為20px，那么頁面中的1rem就相當于20px，舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,h1 {
font-size: 12px;
}
p {
font-size: 2rem;
}
</style>
</head>
<body>
<h1>我是h1中的文字</h1>
<p>我是p標簽中的文字，是h1文字的兩倍</p>
</body>
</html>2、正文
（1）有了上面對這兩個單位的了解，我們就可以通過換算來完成移動端的響應式布局處理，這里我們用iPhone6/7/8的手機為例，屏幕寬度為375px。
1vw = 3.75px（2）好，現在我們想象下100px等于多少vw呢？這里需要計算一下。
100px = 26.6666666vw //因為是無限循環，這里取7位小數
（3）那么怎么把rem和vw聯系起來呢？這里我們來寫一個小案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
html{
font-size: 26.6666666vw
}
p{
font-size: 0.2rem;
width: 2rem;
height: 1rem;
background: pink;
margin: 0 auto;
line-height: 1rem;
text-align: center;
}
</style>
</head>
<body>
<P>我是P標簽中的文字</P>
</body>
</html>上面的案例我們把html中的font-size設置為26.6666666vw，這代表著font-size=100px，然后結合rem的特性就實現了前端css響應式布局
總結：前端響應式布局有很多種，pc端的響應式框架也有很多，移動端的很多框架也自帶響應式，這種方法我覺得也是比較好用的方法，html中的font-size大家可以隨意設置，只是換算過來很麻煩，于是很多方法也就產生了，很多編輯器有自動換算的功能，比如我用的sublime編輯器，網上也有很多在線的網頁在線轉化，好了，以上就是我的使用心得，如有錯誤之處，請大家多多指正！
新聞熱點
疑難解答
