html移动端网格布局,移动端布局

一、reset 和Normalize

Normalize.css 可以解决跨浏览器一致性

建议同时引入

二、布局单位

vw 、wh

px :固定单位

em 、rem ： 相对单位

em：相对于父元素的font-size

rem ：根(html)的font-size

谷歌浏览器默认font-size是16px

移动端应用最多的就是rem,相对于根元素好计算

三、自适应布局

引入flexible.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 > 540) {

width = 540 * 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'] = {}));

四、面试题不确定宽高如何水平垂直居中

1、弹性盒

display:flex;

justify-content:center;

align-items:center;

-2、 transform

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%)

3、网格布局

display:grid;

justify-content:center;

align-items:center

移动端兼容

五、移动端click 300ms延迟

禁止双击缩放--> 加入mate:user-scalable=no

//纯Javascript版

if ('addEventListener' in document) {

document.addEventListener('DOMContentLoaded', function() {

FastClick.attach(document.body);

}, false);

}

//jQuery版

$(function() {

FastClick.attach(document.body);

});

//类似Common JS的模块系统方式

var attachFastClick = require('fastclick');

attachFastClick(document.body);

六、touch事件与穿透问题

touchstart ：开始触摸事件

touchmove ：手指滑动事件

touchend ：触摸结束事件

document.addEventListener('touchstart',function(){

console.log('touchstart');

},false)

document.addEventListener('touchmove ',function(){

console.log('touchmove ');

},false)

document.addEventListener('touchend ',function(){

console.log('touchend ');

},false)

面试题：移动端touch事件有穿透的问题，改怎么解决？

解决方式

1、组织默认行为 ----- e.preventDefault();

2、引入fastclick.js

七、懒加载以及原理

优势：提升性能

实现原理：图片是通过img的src属性，当对src赋值时，浏览器就会请求图片资源。基于这个问题，我们就可以利用标签的自定义属性(data-xxx)，来保存图片路径，当我们需要加载图片的时候，将data-xxx赋值给src就可以实现按需引入按需加载。

插件 lazyload

// var header = document.getElementById('header')

// header.onclick = function(){

// console.log(1);

// }

$(function () {

var pages = 1;

var sizes = 8;

// 已进入页面就请求接口

fImageLoad();

// 滚动条事件

$(window).scroll(function () {

// 滚动的距离

var scrollTop = $(window).scrollTop();

// 可视区域的高度

var winHeight = $(window).height();

// 整个文档的高度

var totalHeight = $(document).height();

if (scrollTop + winHeight >= totalHeight) {

pages++;

fImageLoad();

}

})

function fImgLoad() {

$.ajax({

url: 'dizhi',

data: {

page: pages,

size: sizes

},

success: function (data) {

var records = data.data

$.each(records, function (index, item) {

$('section ul').append(`

`)

})

// 懒加载

$('section ul li img').lazyload();

}

})

}

})

八、下拉刷新和上拉加载