add file:项目设计与原理分析

This commit is contained in:
qianguyihao
2018-03-08 19:48:22 +08:00
parent 9e9bff724c
commit cbdf3ec762
7 changed files with 303 additions and 132 deletions

View File

@@ -136,27 +136,34 @@ PS`dist`表示编译之后的文件,这在库文件中是很常见的。
**2viewport 视口**
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
```
解释:声明当前网页在移动端浏览器中展示的相关设置。我们在做移动 web 开发时,就用上面这行代码设置 viewport。
视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示。
需要注意的是:
- 目前大多数手机浏览器的视口承载页面的容器宽度都是980
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置上方代码设置的值表示在移动端页面的宽度为设备的宽度并且不缩放缩放级别为1
- width:视口的宽度
- initial-scale初始化缩放
- user-scalable:是否允许用户自行缩放值可以写成yes/no也可以写成1/0
- minimum-scale:最小缩放
- maximum-scale:最缩放。
- 此属性为移动端页面视口设置上方代码设置的值表示在移动端页面的宽度为设备的宽度并且不缩放缩放级别为1
属性解释:
- width:设置viewport的宽度。
- initial-scale:初始化缩放比例
- minimum-scale:最缩放比例
- maximum-scale:最大缩放比例。
- user-scalable:是否允许用户手动缩放值可以写成yes/no也可以写成1/0
PS如果设置了不允许用户缩放那么最小缩放和最大缩放就没有意义了。二者是矛盾的。
**3条件注释**
```html