响应式常用要点(一)

科普：什么是响应式布局？

响应式布局，简单点来说，是设计网页的时候，让你的网页随着访问用户设备的变化而发生样式改变，最典型的也就是iPhone官网和程序员熟知的Github
当网页宽度发生变化的时候，导航栏的样式以及下方的图片同样也很会发生相对应的变化

此时页面宽度在997px，导航栏的样式已经发生了变化

而响应式布局，则是为了适配这类的设备宽度而做出的页面样式调整，因为访问你的网页的人可能是手机 ，平板，32寸的显示器？
还可能有更奇怪的，比如树莓派，车载安卓平板。

进入正题

而响应式布局首先要知道响应式布局有几种实现方式去逐步刨析
通常响应式布局实现的方式有三种：

1.使用相对单位 em rem % （不常用vh vw）

1.1 em相对于父元素的字体大小，谷歌浏览器默认1em = 16px
1.2 rem 相对于根html标签的字体大小来进行设置 1rem = 16px
PS：rem和em最通常适用与响应式布局，因为可以通过一个元素控制另外一个元素的大小，而rem让全部使用了rem的元素都可以通过html的字体大小来放大缩小 。
em和rem也可以做到很精确 =====>
比如 html {font-size = 100px} div{font-size = 0.12em}
此时的div的字体大小就为12px（谷歌浏览器默认字体大小为16px 最小字体大小为12px）

2.媒体查询：

媒体查询也是另一种做到响应式的方式

@media screen and (min-width: 750px){
div{
width:100px;
height:100px;
background-color:#ccc;
}
        }

简单解读就是判断当前页面的最大宽度是否小于750px
如果小于750px就去执行里面的样式。
一般来说如果确定了使用媒体查询或者两种方式配合使用。
那么就要决定，你的页面是以pc端为主还是移动端为主
一般来说以谁为主就是确定谁是默认样式。

默认样式：

默认样html布局一定要布好局，后期也别去随意改动，而且尽量别随意去给元素固定高度或者是宽度（nav的高度为40px这种还是要去设置的），不然设置移动端的时候会很非常麻烦。

一般来说只需要做一个页面的话，默认样式一定要去做好，而且不能写死，一旦写死，再去进行媒体查询，需要再去手动清空一堆已设置的样式，然后再去设置新的样式。

第三种方式就是去使用主流框架