1、前言
（1）vw/vh介紹
在使用之前，我們先簡單了解一下什么是vw和rem以及它們的作用，vw是css3出現(xiàn)的一個(gè)新單位，它是“view width”縮寫，定義為把當(dāng)前屏幕分成一百份，1vw即為屏幕的1%，與之對(duì)應(yīng)的是vh，把高分成一百份，1vh即為屏幕高的1%，一般我們常用的vw單位來完成響應(yīng)式開發(fā)
（2）rem介紹
rem是相對(duì)長度單位。相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)，比如你html設(shè)置的字體為20px，那么頁面中的1rem就相當(dāng)于20px，舉個(gè)例子：
| <!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標(biāo)簽中的文字，是h1文字的兩倍</p></body></html> |
2、正文
（1）有了上面對(duì)這兩個(gè)單位的了解，我們就可以通過換算來完成移動(dòng)端的響應(yīng)式布局處理，這里我們用iPhone6/7/8的手機(jī)為例，屏幕寬度為375px。
| 1vw = 3.75px |
（2）好，現(xiàn)在我們想象下100px等于多少vw呢？這里需要計(jì)算一下。
| 100px = 26.6666666vw //因?yàn)槭菬o限循環(huán)，這里取7位小數(shù) |
（3）那么怎么把rem和vw聯(lián)系起來呢？這里我們來寫一個(gè)小案例：
| <!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標(biāo)簽中的文字</P></body></html> |
上面的案例我們把html中的font-size設(shè)置為26.6666666vw，這代表著font-size=100px，然后結(jié)合rem的特性就實(shí)現(xiàn)了前端css響應(yīng)式布局
總結(jié)：前端響應(yīng)式布局有很多種，pc端的響應(yīng)式框架也有很多，移動(dòng)端的很多框架也自帶響應(yīng)式，這種方法我覺得也是比較好用的方法，html中的font-size大家可以隨意設(shè)置，只是換算過來很麻煩，于是很多方法也就產(chǎn)生了，很多編輯器有自動(dòng)換算的功能，比如我用的sublime編輯器，網(wǎng)上也有很多在線的網(wǎng)頁在線轉(zhuǎn)化，好了，以上就是我的使用心得，如有錯(cuò)誤之處，請(qǐng)大家多多指正！
新聞熱點(diǎn)
疑難解答
圖片精選
