手机端网页适配:不得不说的尺寸单位em,rem,vw,vh,pt,px
- em-相对长度单位。相对于当前对象内文本的字体尺寸。
- rem-相对长度单位,相对于根元素(即html元素)font-size计算值的倍数
- vw-相对于视口的宽度,视口被均分为100单位的vw
- vh-相对于视口的高度。视口被均分为100单位的vh
- pt-点(Points),绝对长度单位 1in(英寸,固定长度) = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
- 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 );
}