移动端js基本概念

2019-03-26 本文已影响0人致自己_cb38

一、移动端适配

<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自动完成插件。