移动端适配方案

方案一:

最新方案:(隆重推荐)


1、下载MateHandler.js,并引入页面

2、head里加入<meta content="target-densitydpi=device-dpi,width=640" name="viewport">

3、设置body的宽度,psd有多宽就设多少,同时调用opt.fixViewportWidth(640),比如psd是     640px


总结:利用js库使得px单位自动适配各种屏幕,设计师做设计稿时字体时最小为20px最为合适,
参考博客:他人博客

方案二:

【1、准备工作:sass环境下载与安装】

地址:http://rubyinstaller.org/downloads/(根据电脑配置而定)

【2、sass和compass的安装】

第一步:gem sources --remove https://rubygems.org/

第二步:gem sources -a https://ruby.taobao.org/

第三步:gem install sass

第四步:gem install compass

【3、引入关键文件flexble.js】

(function(win, lib) {

var doc = win.document;

var docEl = doc.documentElement;

var metaEl = doc.querySelector('meta[name="viewport"]');

var flexibleEl = doc.querySelector('meta[name="flexible"]');

var dpr = 0;

var scale = 0;

var tid;

var flexible = lib.flexible || (lib.flexible = {});

if (metaEl) {

console.warn('将根据已有的meta标签来设置缩放比例');

var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);

if (match) {

scale = parseFloat(match[1]);

dpr = parseInt(1 / scale);

}

} else if (flexibleEl) {

var content = flexibleEl.getAttribute('content');

if (content) {

var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);

var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);

if (initialDpr) {

dpr = parseFloat(initialDpr[1]);

scale = parseFloat((1 / dpr).toFixed(2));

}

if (maximumDpr) {

dpr = parseFloat(maximumDpr[1]);

scale = parseFloat((1 / dpr).toFixed(2));

}

}

} if (!dpr && !scale) {

var isAndroid = win.navigator.appVersion.match(/android/gi);

var isIPhone = win.navigator.appVersion.match(/iphone/gi);

var devicePixelRatio = win.devicePixelRatio;

if (isIPhone) {

// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案

if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {

dpr = 3;

} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){

dpr = 2;

} else {

dpr = 1;

}

} else {

// 其他设备下,仍旧使用1倍的方案

dpr = 1;

}

scale = 1 / dpr;

}

docEl.setAttribute('data-dpr', dpr);

if (!metaEl) {

metaEl = doc.createElement('meta');

metaEl.setAttribute('name', 'viewport');

metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

if (docEl.firstElementChild) {

docEl.firstElementChild.appendChild(metaEl);

} else {

var wrap = doc.createElement('div');

wrap.appendChild(metaEl);

doc.write(wrap.innerHTML);

}

}

function refreshRem(){

var width = docEl.getBoundingClientRect().width;

if (width / dpr > 640) {

width = 640 * dpr;

}

var rem = width / 10;

docEl.style.fontSize = rem + 'px';

flexible.rem = win.rem = rem;

}

win.addEventListener('resize', function() {

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}, false);

win.addEventListener('pageshow', function(e) {

if (e.persisted) {

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}

}, false);

if (doc.readyState === 'complete') {

doc.body.style.fontSize = 12 * dpr + 'px';

} else {

doc.addEventListener('DOMContentLoaded', function(e) {

doc.body.style.fontSize = 12 * dpr + 'px';

}, false);

}

refreshRem();

flexible.dpr = win.dpr = dpr;

flexible.refreshRem = refreshRem;

flexible.rem2px = function(d) {

var val = parseFloat(d) * this.rem;

if (typeof d === 'string' && d.match(/rem$/)) {

val += 'px';

}

return val;

}

flexible.px2rem = function(d) {

var val = parseFloat(d) / this.rem;

if (typeof d === 'string' && d.match(/px$/)) {

val += 'rem';

}

return val;

}

})(window, window['lib'] || (window['lib'] = {}));

【4、常用命令】

安装好sass后,在项目所在的文件夹位置,按住shift+右键-->在此处打开命令窗口,然后

1、compass create 项目名称  (创建项目目录)

2、compass watch  (sass编译css文件)

【5、在公用sass文件定义rem和px单位转换的语句】

$fontsize:64 !default;

@function rem($px) {

@return $px / $fontsize * 1rem;

}

【6、修改配置文件】

1/修改sass、css、js、images文件夹名

2/去除编译后的css文件多余的注释(直接去掉前面的#)


【7、flexble.js文件放置】

一定要放在头部标签的title后面,保证第一时间渲染各种移动设备

【8、开始开展工作】

如以前的 width=100px; border-radius:10px;改写为:

width:rem(10); border-radius:rem(10)

【9、sass语法的学习】

sass中文文档:http://sass.bootcss.com/docs/sass-reference/

sass在线编译测试:http://www.sassmeister.com/

w3cplus:http://www.w3cplus.com/sassguide/syntax.html

                http://www.w3cplus.com/sasscore/setting.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容