关于chrome:JSCSS自适应屏幕

布局适配形式

• Media Query（媒体查问）：当初比拟支流的适配计划，可依据视口不同编写不同款式达到适应成果，比方框架 Bootstrap，它能实现大部分我的项目需要，然而编写过于简单。
• flex 布局：支流的布局形式，不仅实用于挪动 Web，网页上也体现良好，也是当初应用最多的布局形式。
• 固定高度，宽度百分比：这种办法只适宜简略要求不高的 webApp，个别在适应要求不高，或者大屏显示没有要求时候能够应用。

rem 单位介绍
rem（font size of the root element）是绝对长度单位。绝对于根元素（即 html 元素）font-size 计算值的倍数

• 原理：将 px 替换成 rem，在脚本中应用 JS 动静批改 html 的 font-size 适配，它能够依据根视口大小去扭转基准元素的字体，而后进行等比缩放来进行变动，达到各种屏幕适应。

管制的 JS 写法

var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; // 获取屏幕的宽度

// 获取 HTML 的 Dom 元素
var htmlDom = document.getElementsByTagName('html')[0];
// 设置根元素字体
htmlDom.style.fontSize= htmlWidth/20 + 'px';

这种形式目前罕用于 webapp 上，次要是应用 rem 个性来灵便扭转字体大小，达到窗口大小扭转等比缩放元素。

拓展局部：

目前在自适应这块像对于互联网电视，因为开发时候对图片尺寸是有严格要求，因而，集成时候只须要设置视口大小就能够对任何屏幕进行等比缩放。
个别会在 meta 标签中间接设置开发时候基准的大小
<meta name="page-view-size" content="1920*1080" />