移动端页面，咋样做才能在不同大小的手机屏幕上完美展现。。

Question

我是php，最近要写页面。一点思路没有。。不知道咋写了

Answer 1

方法有很多种，我习惯用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);

Answer 2

用bootstrap吧

Answer 3

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

Answer 4

推荐flexsible

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

Answer 5

动态计算屏幕宽度配合rem，你可以百度一下有具体写法。

Answer 6

lib-flexible 自适应解决方案 https://github.com/amfe/lib-f...

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

再聊移动端页面的适配（2017-08-02） https://www.w3cplus.com/css/v...

这里收集了三篇文章，可以参考一下。

Answer 7

1.使用flexible做适配，淘宝目前所用适配方案
2.使用vw,vh
3.使用rem
4.如果会bootstrap框架的话可以参照文档使用bootstrap框架

Answer 8

完美展现这个看功力了。
给你些思路:

1. 如果是响应式布局,pc端移动端都要兼容,bootstrap,semantic等响应式框架可以看下。
2. 只兼容移动端的话,移动端的框架太多了，根据你使用的技术去搜索下
   vue 的话 知道的有mintui cubeui 有赞有个库名字忘
   react 就用过antd 别的没使用过
3. 如果是简单的几个页面,可以搜索一下flex布局,不使用框架，手写下也不太难。

问的也不是很具体，所以只能给你些参考，希望对你有帮助！