PC端页面适配

完成目标：

1、不同分辨率的电脑显示正常

2、放大或者缩小屏幕显示正常

放大和缩小屏幕、放大和缩小浏览器的区别：

前者是改变屏幕宽高所占的像素；

后者只是改变浏览器可视窗口的宽高所占的像素，浏览器的标签栏，地址栏都不会发生变化；

所以在一台机器上模拟其他屏幕时，应该放大和缩小屏幕，而不是浏览器视口（contrl+鼠标滚轮）

对于宽度的适配：

主页面一般分为背景层和内容层，背景层用（background：100%）解决；

内容层要么是定宽的，要么是随屏幕宽度自适应的-----

定宽（width：1200px;margin:0 auto;）

不定宽（.wrap{width:所占百分数}）

对于高度的适配：

1、主体内容高度很长，要用滚动条查看---

内容模块的height、margin-top、top等使用固定的px值就行

2、主体内容被设计成直接在浏览器上完整显示，不用滚动查看---

内容模块height、margin-top、top等使用百分比（根据设计稿来），如

设计稿高度为900px,模块aa的margin-top是20px，此时margin-top应该写成100%*20/900

注意元素百分比的基准点---

流式布局，百分比基于父层

absolute定位元素基于最近的relative父层

fixed基于window可视区域

内容适配：

img（宽度100%，高度auto）

字体（另外补充）