html各种页面宽度outerWidth、innerWidth、clientWidth

由淘宝前端的一篇rem的文章（ 点击前去 ），得知安卓4.0以下的版本浏览器，浏览器可见区域宽度与实际不符（如文中的例子，中兴U930手机上物理分辨率宽度为540px（window.outerWidth）, 页面可见区域宽度值为360px（window.innerWidth）, 而实际页面可利用的宽度为400px左右），而引出了另一个问题，js中能够获取到各种宽度的方式，和各种宽度代表的意义。

综合下表，（在不考虑低版本安卓浏览器 页面可视区域js取得的值与实际可利用区域不符的情况）我们 设置根字体大小（用于rem）使用页面宽度的1/10，在不主动改变滚动条样式的情况下，页面宽度使用document.ducumentElement.clientWidth ，若需改动滚动条样式则判断为webkit内核的手机浏览器 的情况下使用window.innerWidth

screen是设备的屏幕对象，理论上，当一个设备固定之后，那么这个设备的屏幕的可视宽度和高度也是固定的

window.innerWidth，window.innerHeight，document.documentElement.clientWidth，document.documentElement.clientHeight这几个属性，是取的浏览器内部的可视宽高（移动设备下为移动设备可视区域的宽高减去手机状态栏、浏览器控制栏），即浏览器一屏的宽高。

document.body.clientWidth、document.body.clientHeight。有滚动条情况下，包含滚动内容的高度。

document.body返回出来的是html 中 body 节点；document.documentElement返回的是 html 根节点。

<!DOCTYPE>模式下，如果不设置html,body{height:100%}且出现滚动条的情况下，

document.documentElement.clientHeight与document.body.clientHeight的值一般是不同的

document.body.clientWidth =>BODY对象宽度

document.body.clientHeight =>BODY对象高度

document.documentElement.clientWidth =>可见区域宽度

document.documentElement.clientHeight =>可见区域高度

设置html,body{height:100%}后，document.body.clientHeight与document.documentElement.clientHeight值相同，为document.documentElement.clientHeight的值。

浏览器相对于显示屏的位置，即document 在screen的某个位置

除了 Internet Explorer外，所有主要浏览器都支持screenX和screenY属性。

注意： IE浏览器使用。 "window.screenLeft" 和 "window.screenTop"获得相同的值

1、安装node（自带npm包管理工具）

2、安装vue2.x脚手架：npm install vue-cli -g，控制台输入vue list查看是否安装成功

3、创建项目：vue init webpack my-project

4、安装postcss-px2rem：npm install postcss-px2rem

5、配置：找到文件build/vue-loader.config.js，添加如下：

const px2rem = require('postcss-px2rem')

// 配置remUnit

postcss: function() {

        return [px2rem({remUnit: 75})]

}

6、在index.html中添加根font-size大小

<script>

      document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px'

      window.addEventListener("resize",()=>{

      document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px'

    })

</script>

---