苏宁易购WAP的meta分析

响应式

meta设置

媒体查询时读的width为viewport的宽度。viewport宽度为手机分辨率。比如note2 1280*720.需要重置为设备 640*360

方式

类型

css

javascript

原理

媒体查询宽、高范围。设置html的font-size基准值

(window.innerWidth/psd的初始化宽度)*psd的初始font-size。算出当前网页的font-size。赋给html

特征

优点： 纯css解决

缺点： 需要在页面渲染前，阻塞浏览器。

部分旧手机浏览器，需内嵌JS代码才能保证阻塞。

缺点： 因为是范围，不能精确适配。如果新增一种主流手机，离范围的边界较远，需要为它重新划定范围

优点

非常精确

css响应式

范围的选择是根据需要适配的主流手机分辨率来定，尽量让主流手机接近范围边界。并非按规律递增。

/*

rem方式，750px 为psd基准宽度，50px为font-size基准大小。 body设置的是默认字体大小

*/

html{font-size:50px;}

body{font-size:24px;}

@media screen and (min-width:320px){

html{font-size:.333333333333332px;}

body{font-size:12px;}

}

@media screen and (min-width:360px){

html{font-size:24px;}

body{font-size:12px;}

}

@media screen and (min-width:375px){

html{font-size:25px;}

body{font-size:12px;}

}

@media screen and (min-width:384px){

html{font-size:.6px;}

body{font-size:14px;}

}

@media screen and (min-width:400px){

html{font-size:.666666666666668px;}

body{font-size:14px;}

}

@media screen and (min-width:414px){

html{font-size:.6px;}

body{font-size:14px;}

}

@media screen and (min-width:424px){

html{font-size:.266666666666667px;}

body{font-size:14px;}

}

@media screen and (min-width:480px){

html{font-size:32px;}

body{font-size:.36px;}

}

@media screen and (min-width:540px){

html{font-size:36px;}

body{font-size:.28px;}

}

@media screen and (min-width:720px){

html{font-size:48px;}

body{font-size:.04px;}

}

@media screen and (min-width:750px){

html{font-size:50px;}

body{font-size:24px;}

}

js响应式

/*

rem方式，640px 为psd基准宽度，16px为font-size基准大小。

*/

function _adaptFont(maxWidth, baseWidth,baseSize){

maxWidth = maxWidth || ;//最大值640px

baseWidth = baseWidth || ;

baseSize = baseSize || ;

var winWidth = parseInt(window.innerWidth); /*s4手机读到的winWidth是分辨率的宽*/

var docWidth = parseInt(document.documentElement.clientWidth); //和winWidth区别是，减去右边滚动条

var bodyWidth = parseInt(document.body.clientWidth); //混合模式下使用

var docWidth = Math.min(winWidth, bodyWidth, docWidth);

docWidth > maxWidth && (docWidth = maxWidth);

//设置基准值

document.documentElement.style.fontSize = (docWidth/baseWidth)*baseSize + 'px';

}

_adaptFont();

window.addEventListener("resize",_adaptFont);

项目新的需求，网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...

pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

移动端web网页meta设置