响应式布局

首先响应式布局是顺应互联网发展的产物，随之现在屏幕的越来越大，屏幕分辨率越来越高，之前的一些固定屏宽的写法，基本已经被淘汰了，也正是在这种情况之下，出现一种自适应的写法（流布局和百分比布局），为了能在不同的终端展示不同的效果，所以我们通常会选择响应式布局，有些人看到这的时候可能会问，分终端做不是也行吗？其实这种想法不是不可以，但他的缺点就是成本要：响应式高！

关于响应式布局：

1、实现响应式布局的三个要素：

　　　　viewport视口设置

　　　　@media媒体查询

　　　　不要把样式尺寸写死：多用百分比宽度来确定布局尺寸

　　　　　　　　　　多用rem  em来确定布局尺寸（在第六部分有更具体的说明）

　　　　　　　　　　多用vh  vw来确定布局尺寸（在第七部分有更具体的说明）

 

　　2、视口设置：

　　　　视口就是可见的屏幕尺寸

　　　　视口不说高度只说宽度，因为高度是根据内容撑开的，宽度才是需要设置的

　　　　移动端：视口就是屏幕的大小

　　　　　　　　因为都是全屏显示的一般

　　　　设置方法：设置meta标签就可以

另外，作为一个专业的前端人员在我们绘制页面的时候，一定要把css和html文件分开写，也就是实现样式和页面的分离！