原文鏈接 http://azq.space/blog/bigcan-lesson-1/
首先我先說兩個(gè)概念绿聘，第一嗽上，響應(yīng)式：一個(gè)頁面在不同尺寸的瀏覽器中不同的表現(xiàn)；第二熄攘，自適應(yīng)：一個(gè)頁面在任何尺寸瀏覽器下表現(xiàn)一致.這里只說自適應(yīng)兽愤。
1.簡(jiǎn)單粗暴型
zoom方式：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必須,放在head標(biāo)簽中-->
<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下執(zhí)行即可
</script>
以上是通過css屬性zoom來縮放頁面，設(shè)計(jì)稿寬度為640(以下設(shè)計(jì)稿尺寸都為640)挪圾，所以這樣的好處就是直接按照原來設(shè)計(jì)稿的尺寸用px來寫css浅萧，不過這個(gè)顯然不夠高大上，頁面有時(shí)會(huì)不清晰哲思，但是通過和%的配合也可以快速的構(gòu)建你的h5頁面
css3的scale方式：
此方式bug眾多洼畅，不適合新手，也不適合老司機(jī)棚赔，所以 略略略
2.溫柔小巧型
meta-viewport-scale方式：
通過比例來對(duì)initial-scale等屬性進(jìn)行重置帝簇，少部分瀏覽器不識(shí)別重置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必須,放在head標(biāo)簽中-->
<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也是按照原始設(shè)計(jì)稿來寫,也能解決1px的問題靠益，暫時(shí)沒有發(fā)現(xiàn)什么問題,也許會(huì)有不清晰的現(xiàn)象,如果有同學(xué)在使用這種方法的時(shí)候遇到問題請(qǐng)及時(shí)告訴我,趕緊填坑
3.高端時(shí)尚型
這是個(gè)高清適配的方法,除了重置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;
// 設(shè)置viewport胧后，進(jìn)行縮放芋浮，達(dá)到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 設(shè)置data-dpr屬性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 動(dòng)態(tài)寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 給js調(diào)用的壳快，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)
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來對(duì)我們的css樣式進(jìn)行管理，這里簡(jiǎn)單的介紹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;
}
}
/*簡(jiǎn)單的圓角半徑*/
.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;
}
/*轉(zhuǎn)換/旋轉(zhuǎn) 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是不被瀏覽器識(shí)別的所以我們要編譯它濒憋，一種是用在線的js編譯何暇，這種要多加載一條js；建議用程序來編譯less凛驮，例如使用npm包中的less來編譯;或者用構(gòu)建工具gulp或者包管理工具webpack來編譯裆站，有時(shí)間可以分享給大家我的幾個(gè)項(xiàng)目的源碼;再或者在css中直接寫px然后利用npm包中的px2rem來直接編譯成rem,然后引用編譯好的即可;其實(shí)上面的less中的前綴是可以省略的，然后用npm包中的autoprefixer來自動(dòng)生成即可
這個(gè)適配方法對(duì)于Swiper滑動(dòng)組件有點(diǎn)麻煩
var mySwiper = new Swiper('.swiper-container', {
height : window.innerHeight,//這里需要給一個(gè)高度
direction : 'vertical'
})
請(qǐng)大家踩坑
4.css型
%
這個(gè)就不多說了，就是需要計(jì)算和設(shè)計(jì)稿寬度的比和高度比宏胯，注意的是：padding羽嫡，margin的百分比計(jì)算是根據(jù)寬度的，這點(diǎn)要很注意
vw&vh
這個(gè)是忘記了是css3新出來的還是以前就有了肩袍，這個(gè)類似%杭棵，但是他的父級(jí)是屏幕，即vw對(duì)應(yīng)屏幕寬度氛赐，vh對(duì)應(yīng)高度魂爪，整個(gè)屏幕的大小是100vw*100vh
5.自由發(fā)揮型
下面說一個(gè)我最常用的方式：
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;
// 動(dòng)態(tài)寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html,body{font-size:' + rem + 'px!important;}';
動(dòng)態(tài)的設(shè)置根的字體大小
css中rem的處理方式還是同第三種的解決方式
這種方法兼容性比較好滓侍，移動(dòng)端基本都o(jì)k了;有的時(shí)候設(shè)計(jì)出來的設(shè)計(jì)稿可能，略微的長(zhǎng)一些牲芋，這時(shí)候我們?cè)诓季稚暇鸵蒙?和vh,flex,圖片要設(shè)置高度寬自動(dòng),這種方法真的要隨機(jī)應(yīng)變了撩笆，但是這種方法也是對(duì)于觀看者最友好的，能最大程度的不因可視區(qū)域的變小而影響觀看
以上是我用過的缸浦，踩過坑的方法夕冲，還有其他方法請(qǐng)一起踩坑哦
以上有什么代碼、概念之類的錯(cuò)誤請(qǐng)及時(shí)批斗裂逐，也歡迎批斗
不知道以上對(duì)大家有沒有幫助歹鱼，沒有的話我也寫了這篇文章了；有的話那我就心滿意足了
原文鏈接 http://azq.space/blog/bigcan-lesson-1/
公眾號(hào)
