响应式第5天-响应式手机网站制作

2、视口

定义：实际上，就是放置页面的容器，也就是html上面的标签。

在PC端，视口 = 屏幕的宽度；（视口=一屏宽）
在手机上，视口 默认等于 980px，需要适配。

2.1视口标签（ 是什么为什么要有它 ）

• Def:视口标签可以理解为浏览器用来显示网页内容的区域大小（ 满屏 ）；

• Why:
  早期我们为传统PC机设计网页固定版心不会超出我们设备的宽度，所以网页内容都可以完全显示。但是随着移动上网设备越来越多，在这种情况下如果直接将原来的页面放在手机上查看，那么因为手机的设备宽度远小于设计版心，所以在不做任何处理的情况下该网页一定会出现水平滚动条或者模块叠加。

在这种情况下最早由苹果公司提出视口标签的概念即任何手机在出厂时都会有一个默认的浏览器大小（ 这个大小和设备宽度不同 ），而这个大小基本满足常见的网页版心。从而保证之前为PC设计的页面在不做处理的情况下可以直接在手机上查看，只不过显示上会变的很小。

• 使用视口标签，可以控制视口的大小，如下：
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  (sublime 使用meta:vp 快捷生成)
  说明：
  （1）viewprot : 通过meta 标签里的name属性设置，即表示该头信息在定义视口大小。
  （2）width: 自定义设备的视口宽度，可以是具体数值，也可以是关键字 deive-width( 设备宽度【用的很多】 )。width=device-width是让视口的大小 = 当前设备屏幕的大小；
  （3）user-scalable可以设置是否允许用户缩放当前页面，no是不允许，yes是允许；user-scalabe=no是指不允许用户缩放当前页面；
  （4）后面3个scale都是用来扩大 html 页面大小的，给的越小，页面越大，如果设置 ...-scale=0.5，实际上是将页面扩大两倍。
  （5）initial-scale: 设置页面默认的缩放系数（ 页面刚开始呈现时缩放的比例，一般设置成1.0，代表1：1显示页面;写2即表示浏览器放大200% ）。
  （6）maximum-scale||minimum:分别表示最大和最小缩放系数（ 一般都为默认值 ）maximum-scale和minimum-scale可以设置手机允许缩放时的缩放尺寸大小区间。

document.documentElement.clientWidth;       //浏览器窗口大小