鍍金池/ 問答/HTML5  PHP  HTML/ 移動端頁面,咋樣做才能在不同大小的手機屏幕上完美展現。。

移動端頁面,咋樣做才能在不同大小的手機屏幕上完美展現。。

我是php,最近要寫頁面。一點思路沒有。。不知道咋寫了

回答
編輯回答
脾氣硬

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

2018年2月27日 09:58
編輯回答
心夠野

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

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

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

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

2017年12月3日 05:00
編輯回答
護她命

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

2018年1月31日 21:15
編輯回答
淺淺

完美展現這個看功力了。
給你些思路:

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

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

2017年12月27日 00:06
編輯回答
艷骨

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

2018年8月3日 20:52
編輯回答
伴謊
2018年3月11日 19:56
編輯回答
墨沫

方法有很多種,我習慣用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);

2017年9月25日 11:35
編輯回答
伐木累

bootstrap

2017年11月5日 08:07