移动端WEB网页开发之适配方案（二）

手机端网页适配：不得不说的尺寸单位em,rem,vw,vh,pt,px

1. em-相对长度单位。相对于当前对象内文本的字体尺寸。
2. rem-相对长度单位，相对于根元素(即html元素)font-size计算值的倍数
3. vw-相对于视口的宽度，视口被均分为100单位的vw
4. vh-相对于视口的高度。视口被均分为100单位的vh
5. pt-点（Points），绝对长度单位 1in（英寸,固定长度） = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
6. px-相对长度单位，像素.

一，网易手机端适配

html {
  font-size: 13.33333vw
}
@media screen and (max-width:320px) {
  html {
    font-size: 42.667px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:321px) and (max-width:360px) {
  html {
    font-size: 48px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:361px) and (max-width:375px) {
  html {
    font-size: 50px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:376px) and (max-width:393px) {
  html {
    font-size: 52.4px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:394px) and (max-width:412px) {
  html {
    font-size: 54.93px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:413px) and (max-width:414px) {
  html {
    font-size: 55.2px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:415px) and (max-width:480px) {
  html {
    font-size: 64px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:481px) and (max-width:540px) {
  html {
    font-size: 72px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:541px) and (max-width:640px) {
  html {
    font-size: 85.33px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:641px) and (max-width:720px) {
  html {
    font-size: 96px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:721px) and (max-width:768px) {
  html {
    font-size: 102.4px;
    font-size: 13.33333vw
  }
}
@media screen and (min-width:769px) {
  html {
    font-size: 102.4px;
    font-size: 13.33333vw
  }
}

下载样式文件：https://static.ws.126.net/163/wap/f2e/milk_index/index.e9b4c1b8.css

二，新浪手机端适配

;!function(w,d,m){function r(){var t=100,o=750,e=d.documentElement.clientWidth||w.innerWidth,n=m.max(m.min(e,480),320),h=50;320>=n&&(h=m.floor(n/o*t*.99)),n>320&&362>=n&&(h=m.floor(n/o*t*1)),n>362&&375>=n&&(h=m.floor(n/o*t*1)),n>375&&(h=m.floor(n/o*t*.97)),d.querySelector("html").style.fontSize=h+"px"};r();w.onresize=function(){r()}}(window,document,Math);
var isChangeSax=1;window.isNphBackUrl = 1;

三，搜狐移动端适配

分辨率动态设置根元素字体法，即html元素的属性  data-dpr="1" style="font-size: 32px;"是动态设置的

!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else{if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}}var isIos=a.navigator.appVersion.match(/iphone/gi);if(isIos){f.setAttribute("class","ios")}else{f.setAttribute("class","android")}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g){if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild){f.firstElementChild.appendChild(g)}else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));

四，2345网址导航
 

​
@media only screen and (max-width: 319px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (min-width: 360px) and (max-width: 374px) {
  html {
    font-size: 12px;
  }
}
@media only screen and (min-width: 375px) and (max-width: 399px) {
  html {
    font-size: 12px;
  }
}
@media only screen and (min-width: 400px) and (max-width: 479px) {
  html {
    font-size: 13px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
  html {
    font-size: 18px;
  }
}
@media only screen and (min-width: 640px) and (max-width: 719px) {
  html {
    font-size: 21px;
  }
}
@media only screen and (min-width: 720px) {
  html {
    font-size: 24px;
  }
}

​

http://m.2345.com/css/v5/common_index.css

五，淘宝移动端适配

与搜狐一样动态设置html根元素字体大小来修改其分辨率属性值

http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

https://github.com/amfe/lib-flexible/blob/master/src/flexible.js

六，京东商城移动端适配

html {
  font-size: 20px;
  font-size: 5.33333vw
}
@media screen and (max-width:320px) {
  html {
    font-size: 17.06667px
  }
}
@media screen and (min-width:540px) {
  html {
    font-size: 28.8px
  }
}


//媒体查询

七，头条移动端适配

自适应方式同淘宝与搜狐

八，腾讯移动端适配

            (function(base, min, max, scaling){
              var cacheWidth = 0;
              var timer;
              var docEl = document.documentElement;
              var resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize';
              var recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                clientWidth = Math.min(clientWidth, max);
                clientWidth = Math.max(clientWidth, min);
                if(cacheWidth !== clientWidth) {
                  clearInterval(timer);
                  cacheWidth = clientWidth;
                  docEl.style.fontSize = scaling * (clientWidth / base) + 'px';
                }
              }
              recalc();
              setTimeout(recalc, 300)
              if (!document.addEventListener) return;
              window.addEventListener(resizeEvt, function() {
                timer = setInterval(recalc, 10);
              });
            })(375, 300, 768, 100);
          

总结如下：
几乎上述所有的移动端页面适配都围绕rem来应用的，rem就是利用根元素html的值来动态调整其内部元素的宽度以及字体大小。

写在后面：分享一个简单的css3图片分辨率适配
 

div{
    background-image:image-set( url(1x.png) 1x, url(2x.png) 2x );
}