一、移动端适配
<meta name=”viewport” content=”width=divce-width,initial-scale=1,minimum-scale=1,maximun-scale=1,user-scaleable=no” />
二、媒体查询
@media screen and(min-width:1200){
//大屏幕设备
}
@media screen and(min-width:992){
//中等屏幕设备
}
@media screen and(min-width:768){
//小型屏幕设备
}
三、移动端的布局
单位：
px：CSS像素
pt : 像素单位
em：相对于父级字体大小
rem：相对于html的字体大小
deg：角度
%：百分比
vw，vh
四、移动端基本js概念
1．PC端
1)100% 缩放
在缩放级别为100%时，1单位的CSS的pixel是严格相等于1单位的设备。
2)screen.width 和screen.height
概念：用户的屏幕的完整大小，指设备的像素。
兼容： IE8 以CSS的pixels来度量。
和屏幕的分辨率有关系。
他们的值不会因为缩放而改变：他们是显示器的特征，而不是浏览器。
3)window.innerWidth 和 window.innerHeight
概念：包含滚动条尺寸的浏览器完整尺寸。CSS的pixels
兼容：IE不支持，Opera用设备pixels来度量。
与屏幕的缩放有关系。
let borwser_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
原理是HTML 和body标签默认的宽度就是指viewport的宽度。 在PC端viewport是严格的等于浏览器的窗口。
document.documentElement html的可视区域 兼容高级浏览器欧朋
document.body body的可视区域 兼容IE
和缩放比有关。
窗口内部宽度和高度的尺寸，包含了滚动条的尺寸。
4)window.pageXOffset 和 window.pageYOffset
概念：页面的位移，就是页面滚动的距离。
兼容性问题：pageXOffset 和 pageYOffset 在 IE 8 及之前版本的IE不支持, 使用”document.body.scrollLeft” and “document.body.scrollTop” 来取代。
let scroll_top = window.pageYoffset || document.body.scrollTop;
5)document. documentElement. clientWidth/Height
概念：指视口的大小
即使对HTML的宽高进行赋值，这俩个值不会发生变化。
它虽然貌似从<html>元素取值，但实际描述的确是viewport的尺寸。
window.innerWidth/Height包含滚动条
document. documentElement. clientWidth/Height不包含
6)document. documentElement. offsetWidth/Height
概念：获取HTML的尺寸。
兼容性问题：IE用这个值标示viewport的尺寸而非<html>
IE下使用 document.body.offsetWidth
7)事件机制
pageX/Y, clientX/Y, screenX/Y
pageX/Y：从<html>原点到事件触发点的CSS的 pixels
clientX/Y：从viewport原点（浏览器窗口）到事件触发点的CSS的 pixels
screenX/Y：从用户显示器窗口原点到事件触发点的设备 的 pixels。
2．移动端
1)document. documentElement. clientWidth/Height
概念： 布局视口的大小
document.body.clientWidth/clientHeight
2)window.innerHeight| window.innerWidth
视觉视口的尺寸。
因为是一个CSS像素的度量单位，所以用户缩放的时候会影响这俩个值的大小。
3)screen.width | screen.height
概念：屏幕的尺寸。
五、rem布局
1．原理
简单的理解，rem就是相对于根元素<html>的font-size来做计算。
2．flexible的CDN：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
3．flexible的实质作用：
实际上就是能过JS来动态改写meta标签
var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
4．flexible所做的事情：
动态改写<meta>标签
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
给<html>元素添加font-size属性，并且动态改写font-size的值
5．模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="apple-touch-icon" href="favicon.png">
<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
<title>再来一波</title>
</head>
<body>
<!-- 页面结构写在这里 -->
</body>
</html>
6．px转rem
CSSREM：一个CSS的px值转rem值的Sublime Text 3自动完成插件。
网友评论