网页常见的一些尺寸

屏幕的总宽度和高度，他们是显示器的尺寸，而不是浏览器的尺寸。这些尺寸以设备像素为单位进行测量，平时很少用到

通过 screen.width 和 screen.height 获取

浏览器窗口的内部尺寸，以CSS像素为单位（测量值包含滚动条）

通过 window.innerWidth 和 window.innerHeight 获取

文档的水平和垂直滚动偏移量。因此，您可以找出用户滚动了多少。以CSS像素为单位

通过 window.pageXOffset 和 window.pageYOffset 获取

字面理解，视口即可以看见的窗口大小。所以大多数情况下他和浏览器的窗口大小一致。

我们知道html页面最外层的元素是html，他在浏览器中显示，但其实在浏览器和html页面之间，还有一层，即：视口。

他在html元素的外层，包含html。

通过 document.documentElement.clientWidth 和 document.documentElement.clientHeight //document.documentElement实际上是html元素 获取

我们平时设置的html/body width:100%，实际上就是设置html，body等于视口的宽度。设置某个元素，如侧边栏width:20%，实际也是相对于视口设置的（如果他的上级元素是body：width：100%），所以当浏览器窗口变化，他的宽度会跟随变化。

但视口不是HTML创建的，因此不能受CSS影响。当我们设置html为固定宽度width:200px，它的值还是浏览器窗口的宽度和高度。

窗口包含滚动条的大小，视口不包含，视口只是我们可以看见的大小

即页面实际的宽和高

通过 document.documentElement.offsetWidth 和 document.documentElement.offsetHeight 获取

发生鼠标点击事件时，常见的属性值

@media all and (max-width: 400px)

此处的值一般指的浏览器大小，即视口的大小

A tale of two viewports — part one

A tale of two viewports — part two

HTML5的移动端网页设计稿，通常情况下，内容区为750px或960px或者1080px的，一般不小于750px像素大小（宽度）

设计稿可以比750px大，但是绝对不能比750px小，这个主要是由于当前手机的分辨率相对较高（iPhone 6是375物理像素，但实际像素为其两倍，也就是750，这个750就是这么来的）

如果设计图稿过小，前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清，所以这也是为何要“大”分辨率

此外需要注意的是，要保证页面的基准字体大小，在320px的设计稿当中，最小字体不宜小于12像素，其他像素的设计稿当中，等比例换算即可（12/320px*设计稿像素值）

1、如图，我们对div设置固定宽度和高度。

2、图像预览效果如下所示。

3、然后在div里面插入一张图片，如图。

4、插入图片后，在预览中看到的效果，明显图片已经将父级的背景尺寸给盖住了，图片偏大了。

5、然后这个时候，将图片的宽度设置为何父级一样的宽度，代码就是width:100%这里的100%会自动跟随父级的宽度选择。

6、这时候回到浏览器中，可以看到图片的宽度和父级div的宽度一致了，然后修改的就是高度的范围了。

7、如果也将图片的高度设置为父级的100%，那么图形就会发生形变，所以在这里需要将父级的高度去掉，这样子集的高度就自动化了。

8、很多时候，将图片在框中显示的时候，在底部会出现一个小边框，这时候将图片设置为display:block转为块状就可以了。

---