移动端布局
viewport详解
viewport: 视口 ,指的是浏览器中放网页内容的区域
移动端的viewport不会自动随着设备的变化而变化,被设定为一个固定值 980 或者 1024,为了能够在移动端正常查看pc端页面.
做移动端布局时,需要把viewport设置为随着设备的变化而变化
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
参数说明:
width : 设置视口的宽度 device-width设备宽度
initial-scale: 页面的初始缩放比例 1.0 原始大小
maximum-scale=1 : 最大缩放值
minimum-scale=1 :最小缩放值
user-scalable=no : 用户是否可缩放 一般就设置为no
height:设置视口的高度,一般不用
3-常见移动端布局解决方案
1)-固定布局
将网页设置为固定的宽度,左右两边留白,布局和pc端相同
优点: 简单,容易上手
缺点: 大屏幕设备留白较大,体验不好
2)-流式布局
宽度都用百分比 ,高度固定
优点: 能够轻松实现响应式效果
缺点: 由于垂直方向是固定高度,所以元素会进行拉伸或者压缩,用户体验不好
3)-响应式布局
利用媒体查询根据不同的设备做3套或者4套代码
优点: 根据不同的设备会有不同的布局,用户体验好
缺点: 工作量大,代码繁杂,不便于后期维护
4)-rem布局
rem 单位 : 指的是 html标签的font-size
rem布局原理: 通过js动态根据不同的设备尺寸计算一个不同的html标签的font-size值,布局的时候单位由px换算成rem (除以100)
步骤:
1- viewport设置: 让网页宽度等于设备宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
2- 引入一段js动态计算html的font-size (项目中直接引入remScale.js)
//先获取html文档的宽度(相当于设备宽度)
var deviceWidth = document.documentElement.clientWidth;
var fs = deviceWidth*100/640; //640可以根据设计稿去调整
// 设置htmlfont-size
document.documentElement.style.fontSize = fs + 'px';
完整js代码 引入项目
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth; //获取设备尺寸
if (!clientWidth) return;
if(clientWidth>=720){ //设计稿宽度
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); //绑定事件
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
