Wscats / Layout Demo
Programming Languages
Projects that are alternatives of or similar to Layout Demo
页面结构布局
单位
px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对屏幕的，一个像素1px就是屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕电脑，在小屏幕手机上就会很不友好，做不到自适应的效果
em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，它是相对于当前对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸16px
相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在HTML标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局
view height和view width的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px，即1 vh = 1200px/100 = 12 px
总结：
-
px是固定长度单位，不随其它元素的变化而变化 -
em和%是相对于父级元素的单位，会随父级元素的属性font-size或其它属性变化而变化 -
rem是相对于根目录HTML元素的，所有它会随HTML元素的属性font-size变化而变化 -
px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位 - 一般来说：
1em = 1rem = 100% = 16 px
视口
移动设备上的
viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
- 布局视口（layout viewport）
以屏幕分辨率为基准，实际上布局视口的宽度要比屏幕宽出很多，以上图片显示的尺寸就是 layout viewport
- 视觉视口（visual viewport）
layout viewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，这个viewport叫做visual viewport。在JS中可以通过window.innerWidth来获取
- 理想视口（ideal viewport）
一个能完美适配移动设备的视口，需要手动添加meta标签，一般视口大小都设置为设备大小
<meta name="viewport" content="width=device-width">
举个例子，手机上的浏览器是全屏的，手机实际宽度是320像素(即visual viewport)，而手机分辨率是980宽度(即layout viewport)，所以手机上打出来的是980而不是320，如果设置了meta完美适配设备(即ideal viewport)
- meta标签属性
利用以下属性对
viewport进行控制, 可多个同时使用，并用逗号隔开
-
width设置layout viewport的宽度，为一个正整数，或字符串device-width -
initial-scale设置页面的初始缩放值，为一个数字，可以带小数 -
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数 -
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数 -
user-scalable是否允许用户进行缩放- no代表不允许
- yes代表允许
所以如果不定义viewpoint的话，页面宽度以屏幕分辨率为基准，而设置以后可以根据设备宽度来调整页面，达到适配终端大小的效果
动态设置字体大小及viewport
<script type="text/javascript">
// 把尺寸放大N倍（N是window.devicePixelRatio）
// 物理像素*设备像素比=真实像素
var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
// 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
var scale = 1/window.devicePixelRatio;
var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
document.getElementById("vp").content = mstr;
</script>