响应式布局—rem和媒体查询

响应式布局是一种可以适应不同设备尺寸和屏幕方向的设计方式，旨在提供更好的用户体验

一、响应式布局的几种实现方法

1、百分比布局

2、vw和vh 

3、flex布局

4、使用rem

5、媒体查询

百分比布局以及vw和vh 由于计算困难，在大多数响应式的页面中使用较少，多数使用媒体查询和rem的方式实现响应式布局

二、rem介绍

名称：rem的全称是font size of the root element，看到这个名字我们就能知道这个和根元素的字体大小有关了！

1.规则：1rem等于html根元素设定的font-size的px值

如果没有设置html的字体大小的话，那么浏览器默认1rem=16px

一般，我们都习惯将html的font-size设置为100px，这样便于rem的计算

假设设计稿是需要一个500px*280px的盒子，我们则可以直接使用5rem*2.8rem

2.给html设置font-size，并在使窗口变化时页面做出响应

如下：

function setRem() {
    let pageWidth = window.innerWidth;
    //为了ie也能拿到可视窗口宽度
    if (typeof pageWidth != "number") {
        //标准模式
        if (document.compatMode == "CSS1Compat") {
            pageWidth = document.documentElement.clientWidth;
            //怪异模式
        } else {
            pageWidth = document.body.clientWidth;

        }
    }
    var baseSize = 100
    var scale
    if (pageWidth <= 768) {
        scale = pageWidth / 768
    } else if (pageWidth <= 992) {
        scale = pageWidth / 992
    } else if (pageWidth <= 1440) {
        scale = pageWidth / 1440
    } else {
        scale = pageWidth / 1920
    }
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * scale) + 'px'
}
setRem()
window.onresize = () => setRem()

其他问题：如果需要响应式，只依靠rem是无法实现的，因为PC端的设备窗口都很大（现在常规是1920px），这个时候如果在窗口宽度过度变化时（假设1920px变为992px）直接缩放页面，是会导致页面效果欠佳的，所以响应式一般至少有两份ui设计稿，这个时候就需要用到媒体查询了！

三、媒体查询

1.介绍：媒体查询知识点

需要详细描述的可以阅读w3c，简单点理解就是在选定的设备上，自定义屏幕宽度断点，给每个段断点范围匹配期望的样式代码（一般web前端用到的可以这么理解，更深的理解请却独其他全面的资料）

语法：

@media media-type and (media-feature-rule) {
  css rules 
}

// 示例
@media screen and (max-width: 1680px) {

}

媒体查询可以使用max-width也可以使用min-width

2.注意点：

若使用max-width，需要将px数值大的写在上方，从上到下从大往小写

若使用min-width，需要将px数值小的写在上方，从上到下从小到大写

3.常用媒体查询断点

/* 常用分类断点 */

@media (min-width: 767px) {}
/* 手机 */

@media (min-width: 768px) {}
/* 平板电脑 */

@media (min-width: 992px) {}
/* 台式机 */

@media (min-width: 1200px) {}
/* 大桌面台式机 */


/* 常用PC端断点 */

@media screen and (min-width: 1024px){
html{font-size: 18px}
}
@media screen and (min-width: 1100px) {
html{font-size: 20px}
}
@media screen and (min-width: 1280px) {
html{font-size: 22px;}
}
@media screen and  (min-width: 1366px) {
html{font-size: 24px;}
}
@media screen and (min-width: 1440px) {
html{font-size: 25px;}
} 
@media screen and (min-width: 1680px) {
html{font-size: 28px;}
} 
@media screen and (min-width: 1920px) {
html{font-size: 33px;}
}

/* 
其他常用断点
768px
720px
640px
480px
375px
320px
280px
*/