大體上來說，適配移動端并不復雜，基礎思路就三條：

1. 通過 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> 告訴瀏覽器你的網(wǎng)頁在移動設備上如何渲染
2. 使用流式布局，不強制指定元素的寬高，使得它更容易在不同分辨率下渲染
3. 使用媒體查詢 @media 來適配不同分辨率

建議你這么做：

1. 使用一些響應式的框架降低開發(fā)成本，比如 Bootstrap
2. 通過觀摩響應式網(wǎng)頁在不同端的表現(xiàn)學習做法，參考 Bootstrap theme
3. rem 也好，vw 也好，其實是最細枝末節(jié)的小技巧，大概看一眼就行。（實際上，我反對 rem，我覺得就應該 @media + px）

如果你要寫兩套css，可以通過user-agent判斷當前的設備，分別加載不同頁面或者css文件
不過方便的話，還是通過CSS @media 這樣的特性來處理響應式布局。