百木园1.viewport视口
视口（viewport），是视图窗口的简称。
视口的大小就是HTML元素的实际大小。
但是，在移动端要想展示实际页面大小则必须进行视口的适配设置，
否则，移动端加载页面时，默认视口宽度980px或某个值（布局视口宽度），无法呈现实际大小。
说明：
在桌面显示器上CSS中的1px相当于1个物理像素，但在移动屏幕上由于设备分辨率差异较大，
可能相同尺寸屏幕的分辨率（像素密度）相差1倍甚至更多，这时CSS中的1px对应的的物理像素
数量会因设备不同而不同，所以移动端浏览器必须进行viewport适配，才能得到理想的布局效果。
获取布局视口（layout viewport）宽度：
document.documentElement.clientWidth
2.视口适配
使用<meta/>标签控制viewport进行适配设置，得到理想视口宽度（ideal viewport）。
<meta>元素可以提供关于HTML元素的元数据信息，比如页面描述、搜索关键字、访问频率等。
<meta>元素属性：
content，设置或返回<meta>元素的content属性的值；
name，将content属性连接到某个元数据的名称；
httpEquiv，将content属性连接到某个HTTP头部；
scheme，设置或返回用于解释content属性值的格式。
借助<meta>标签进行viewport设置时，name=\"viewport\"，而 meta content的属性值包含以下6个：
width，设置布局视口（layout viewport）的宽度，值为正整数 或 device-width（设备屏幕宽度）
initial-scale，设置页面初始缩放值，值为“0.0-10.0”之间
minimum-scale，设置最小缩放比例，值为“0.0-10.0”之间，必须小于等于 maximum-scale
maximum-scale，设置最大缩放比例，值为“0.0-10.0”之间，必须大于等于 minimum-scale
height，设置布局视口的高度，值为正整数 或 device-height，一般不需要单独定义
user-scalable，设置是否允许用户进行缩放操作，值为 yes/no，默认为“yes”
语法示例：
<meta name=\"viewport\" content=\"initial-scale=1.0,width=device-width,其他可选设置\"/>
注意：
通常，单独设置“initial-scale=1”或者“width=device-width”中的一个都可以得到 ideal viewport，
但是，仅设置“width=device-width”时，在iPhone或iPad上，无论横屏还是竖屏，ideal viewport
都是竖屏时的宽度，而仅设置“initial-scale=1”时，在window phone的IE浏览器上，idealviewport
始终是竖屏时的宽度，当两者同时设置时，浏览器会取二者的值较大的那一个。
3.REM单位
rem（font size of the root element）是相对于根元素的字体大小按比例进行计算的尺寸单位。
在响应式布局中，考虑到不同移动端的尺寸差异，为确保所有元素所占空间在不同设备上比例相同，
页面布局需要动态调整，则通过REM对设备的物理像素和逻辑像素进行动态转换达到布局适配目的。
按照REM思想定义根元素字体大小时，语法如下：
document.documentElement.style.fontSize
=(document.documentElement.clientWidth/750)*100+\"px\";
说明：
⑴上述设置表示将设备宽度进行750等分，再乘以100，得到根元素字体的像素大小。
所以，在不同尺寸的设备上，根元素字体的大小也就不同，但与设备尺寸的比例是相同的。
⑵由于大多数PS设计稿是以iPhone6为标准进行设计的，iPhone6的逻辑像素是375px，而
它的实际物理像素是满屏宽度的2倍，也就是750px，PS设计软件的分辨率和物理像素是
是1:1的比例，所以为了便于不同设备间按比例缩放转换，将设备宽度进行750等分。
⑶为了避免使用rem单位设置元素大小时小于浏览器默认最小尺寸，如12px、14px等，
所以将设备宽度750等分后，乘以一个放大系数，使用“100”则是为了方便计算。
代码示例：
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>viewport&rem</title>
<meta name=\'viewport\' content=\'width=device-width,initial-scale=1.0,user-scalable=no\'>
<script>
document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+\'px\';
</script>
<style>
div{
width: 6rem;height: 0.3rem;background-color: #1e7e34;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector(\'div\');
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.style.fontSize);
console.log(div.clientWidth);
console.log(div.clientHeight);
</script>
</body>
</html>
来源：https://www.cnblogs.com/husa/p/14704158.html
图文来源于网络，如有侵权请联系删除。