1.使用flexible做適配，淘寶目前所用適配方案
2.使用vw,vh
3.使用rem
4.如果會bootstrap框架的話可以參照文檔使用bootstrap框架

lib-flexible 自適應解決方案 https://github.com/amfe/lib-f...

lib-flexible 使用教程 http://www.w3cplus.com/mobile...

再聊移動端頁面的適配（2017-08-02） https://www.w3cplus.com/css/v...

這里收集了三篇文章，可以參考一下。

動態(tài)計算屏幕寬度配合rem，你可以百度一下有具體寫法。

完美展現(xiàn)這個看功力了。
給你些思路:

1. 如果是響應式布局,pc端移動端都要兼容,bootstrap,semantic等響應式框架可以看下。
2. 只兼容移動端的話,移動端的框架太多了，根據(jù)你使用的技術去搜索下
   vue 的話 知道的有mintui cubeui 有贊有個庫名字忘
   react 就用過antd 別的沒使用過
3. 如果是簡單的幾個頁面,可以搜索一下flex布局,不使用框架，手寫下也不太難。

問的也不是很具體，所以只能給你些參考，希望對你有幫助！

尺寸用rem,flexible.js解決方案，你可以參考下https://www.w3cplus.com/mobil...

推薦flexsible

https://www.w3cplus.com/mobil...

方法有很多種，我習慣用rem適配，把下面的復制粘貼拿走放到js里就行了。100px相當于1rem
(function(doc, win) {

var docEl = doc.documentElement,
    isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
    dpr = window.top === window.self ? dpr : 1, //被iframe引用時，禁止縮放
    dpr = 1,
    scale = 1 / dpr,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var metaEl = doc.createElement('meta');
metaEl.name = 'viewport';
metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
docEl.firstElementChild.appendChild(metaEl);
var recalc = function() {
    var width = docEl.clientWidth;
    if (width / dpr > 750) {
        width = 750 * dpr;
    }
    // 乘以100，px : rem = 100 : 1
    docEl.style.fontSize = 100 * (width / 750) + 'px';
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);

})(document, window);

用bootstrap吧