移動端適配方法合集

原文連接 http://azq.space/blog/bigcan-lesson-1/

http://www.jianshu.com/p/ae5e2ec91786/
首先我先說兩個概念，第一，響應式：一個頁面在不一樣尺寸的瀏覽器中不一樣的表現；第二，自適應：一個頁面在任何尺寸瀏覽器下表現一致.這裏只說自適應。

1.簡單粗暴型

zoom方式：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必須,放在head標籤中-->   
<script>
    var _SCALE_ = 1;
    _SCALE_ = function (){
    var deviceWidth = document.documentElement.clientWidth,
    scale = deviceWidth / 640;
    scale = scale > 1 ? 1 : scale;
    document.body.style.zoom = scale;
    return scale;//留着給js用
}();//在body下執行便可
</script>

以上是經過css屬性zoom來縮放頁面，設計稿寬度爲640(如下設計稿尺寸都爲640)，因此這樣的好處就是直接按照原來設計稿的尺寸用px來寫css，不過這個顯然不夠高大上，頁面有時會不清晰，可是經過和%的配合也能夠快速的構建你的h5頁面

css3的scale方式：

此方式bug衆多，不適合新手，也不適合老司機，因此 略略略

2.溫柔小巧型

meta-viewport-scale方式：

經過比例來對initial-scale等屬性進行重置，少部分瀏覽器不識別重置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必須,放在head標籤中-->   
<script>
var _SCALE_ = 1;
    _SCALE_ = function (){
    var deviceWidth = document.documentElement.clientWidth,
    scale = deviceWidth / 640;
    scale = scale > 1 ? 1 : scale;
    var metaEl = document.querySelector('meta[name="viewport"]');
    metaEl.setAttribute('content', 'width=640,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    return scale;
}();
</script>

這種方式和zoom的方式相似也是採用縮放，css也是按照原始設計稿來寫,也能解決1px的問題，暫時沒有發現什麼問題,也許會有不清晰的現象,若是有同窗在使用這種方法的時候遇到問題請及時告訴我,趕忙填坑

3.高端時尚型

這是個高清適配的方法,除了重置meta失效的瀏覽器

dpr，rem，meta

var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement('style'); var metaEl = document.querySelector('meta[name="viewport"]'); dpr = window.devicePixelRatio || 1; rem = docEl.clientWidth * dpr / 10; scale = 1 / dpr; // 設置viewport，進行縮放，達到高清效果 metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 設置data-dpr屬性，留做的css hack之用 docEl.setAttribute('data-dpr', dpr); // 動態寫入樣式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; // 給js調用的，某一dpr下rem和px之間的轉換函數 window.rem2px = function(v) { v = parseFloat(v); return v * rem; }; window.px2rem = function(v) { v = parseFloat(v); return v / rem; }; window.dpr = dpr; window.rem = rem;

而後爲了方便咱們能夠採用less或者sass、scss來對咱們的css樣式進行管理，這裏簡單的介紹less

.px2rem(@name, @px){ @{name}: @px / 64 * 1rem; } .px2px(@name, @px){ @{name}: round(@px / 2) * 1px; [data-dpr="2"] & { @{name}: @px * 1px; } // for mx3 [data-dpr="2.5"] & { @{name}: round(@px * 2.5 / 2) * 1px; } // for 小米note [data-dpr="2.75"] & { @{name}: round(@px * 2.75 / 2) * 1px; } [data-dpr="3"] & { @{name}: round(@px / 2 * 3) * 1px } // for 三星note4 [data-dpr="4"] & { @{name}: @px * 2px; } } /*簡單的圓角半徑*/ .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } /*四角的半徑定製*/ .border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) { -webkit-border-radius: @topleft @topright @bottomright @bottomleft; -moz-border-radius: @topleft @topright @bottomright @bottomleft; border-radius: @topleft @topright @bottomright @bottomleft; } /*方塊陰影 Box Shadow*/ .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } /*元素過渡效果 Transition*/ .transition (@prop: all, @time: 1s, @ease: linear) { -webkit-transition: @prop @time @ease; -moz-transition: @prop @time @ease; -ms-transition: @prop @time @ease; transition: @prop @time @ease; } /*轉換/旋轉 Transform*/ .transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) { -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); } /*線性漸變*/ .gradient (@origin: left, @start: #ffffff, @stop: #000000) { background-color: @start; background-image: -webkit-linear-gradient(@origin, @start, @stop); background-image: -moz-linear-gradient(@origin, @start, @stop); background-image: -ms-linear-gradient(@origin, @start, @stop); background-image: linear-gradient(@origin, @start, @stop); } /*快速漸變*/ .quick-gradient (@origin: left, @alpha: 0.2) { background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); } /*鏡像效果*/ .reflect (@length: 50%, @opacity: 0.2){ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity))); }

這裏寫了一些css3的效果備用

less是不被瀏覽器識別的因此咱們要編譯它，一種是用在線的js編譯，這種要多加載一條js；建議用程序來編譯less，例如使用npm包中的less來編譯;或者用構建工具gulp或者包管理工具webpack來編譯，有時間能夠分享給你們個人幾個項目的源碼;再或者在css中直接寫px而後利用npm包中的px2rem來直接編譯成rem,而後引用編譯好的便可;其實上面的less中的前綴是能夠省略的，而後用npm包中的autoprefixer來自動生成便可

這個適配方法對於Swiper滑動組件有點麻煩

var mySwiper = new Swiper('.swiper-container', { height : window.innerHeight,//這裏須要給一個高度 direction : 'vertical' })

請你們踩坑

4.css型

%
這個就很少說了，就是須要計算和設計稿寬度的比和高度比，注意的是：padding，margin的百分比計算是根據寬度的，這點要很注意
vw&vh
這個是忘記了是css3新出來的仍是之前就有了，這個相似%，可是他的父級是屏幕，即vw對應屏幕寬度，vh對應高度，整個屏幕的大小是100vw*100vh

5.自由發揮型

下面說一個我最經常使用的方式：
rem，vw&vh，%,flex

var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement('style'); scale = docEl.clientWidth / 640; scale = scale>1?1:scale; rem = 64; rem = rem*scale; // 動態寫入樣式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = 'html,body{font-size:' + rem + 'px!important;}';

動態的設置根的字體大小

css中rem的處理方式仍是同第三種的解決方式

這種方法兼容性比較好，移動端基本都ok了;有的時候設計出來的設計稿可能，略微的長一些，這時候咱們在佈局上就要用上%和vh,flex,圖片要設置高度寬自動,這種方法真的要隨機應變了，可是這種方法也是對於觀看者最友好的，能最大程度的不因可視區域的變小而影響觀看

以上是我用過的，踩過坑的方法，還有其餘方法請一塊兒踩坑哦
以上有什麼代碼、概念之類的錯誤請及時批鬥，也歡迎批鬥

不知道以上對你們有沒有幫助，沒有的話我也寫了這篇文章了；有的話那我就心滿意足了公衆號

做者：清哥來liao 連接：http://www.jianshu.com/p/ae5e2ec91786 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。