自媒体查询、flex弹性布局、响应式布局及 rem 布局

功能简介：

自媒体查询、rem布局、响应式布局技术，是三个不同的技术。 自媒体查询 常用在适配不同的设备显示场景下，根据屏幕大小显示不同页面，但功能大致不变的这么一个技术。rem布局 它是一个长度单位，这个长度单位是根据‘根元素’的字体大小的单位确定的（根元素字体大小 = 1rem）。响应式布局 它是在页面宽度改变时，整个页面或者页面中的局部随着页面的缩放进行响应并实时变化（响应式布局和自媒体查询有区别）。在如今复杂的开发中这几个技术越来越密不可分，在项目中可以通过实际需求进行搭配。

自媒体查询：

功能：自媒体查询主要是设置不同的设备屏幕下的显示样式。

获取浏览器或设备宽度：

min-device-width （设备的宽度）\ min-width (浏览器的宽度) （注释：也可以获取高度，就是将width改写成height）

方法：

公共部分：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

内部样式引用（可以编写多组）：
1、 <style> @media screen and (min-device-width:200px) and (max-device-width:300px) { /* 编写样式 */ } </style>

2、 <style media='(min-device-width:200px) and (max-device-width:300px)'> /* 编写样式 */ </style>

外部样式引用（可以引用多个外部样式表）：

1、<link rel="stylesheet" href="样式路径" media='(min-device-width:200px) and (max-device-width:300px)'>

flex弹性布局：

功能： 就是使用flex对页面进行布局，也可以是响应式的。

方法： 一下方法为flex常用方法，具体学习可以点击链接 flex布局

作用在父元素的方法：

flex-direction: 设置主轴方向

flex-wrap: 是否让子元素换行

justify-content：设置主轴对齐方式

align-items: 设置交叉轴的对齐方式

作用在子元素的方法（简写）：

flex：参数一（数字）、参数二（数字）、参数三（px / %）

参数一：子元素平分多余父元素的空间。参数二：子元素按比例压缩超出父元素的宽度。参数三：设置该元素的宽。

rem的使用方法

概念：指相对跟元素的字体大小的单位。（补充：rem于em的区别一个是以根元素字体大小为参考，em是以父级元素为参考）

使用方法：

一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。

手动设定：

<style> html{ font-size: 18px; } </style> 1rem = 18px

js方式自适应：

        const c = ()=>{

                let w = document.documentElement.clientWidth; // 获取设备的宽度

                let n = (20*(w/320)>40?40+'px':(20*(w/320)+'px')) //20为参数  320设备宽度  40显示最大字号

                document.documentElement.style.fontSize = n // 设置根字体大小

        }

        window.addEventListener('load',c) //初始值

        window.addEventListener('resize',c) //屏幕改变的是的值

    </script>

自适应布局

布局特点：不同设备对应不同的HTML或者局部自适应。（不同的设备不同的页面）

js实现方法：
<script>

        const redireat = ()=>{

            let userAgent = nevigator.userAgent.toLowerCase() //获取设备信息

            let device = /ipad|iphone|midp|rv:1.2.3.4|ucwed|android|windows ce|windows mobile/   //适配不同设备

            if(derice.test(userAgent)){

                window.location.href = 'move.html'  //跳转移动端页面

            }else{

                window.location.href='pc.html'   //跳转PC端页面

            }

        }

        redireat()

    </script>

响应式布局

布局特点：确保一个页面在所有终端上，都能显示出令人满意的效果。（一套方案，处处运行。）

设计思路：使用自媒体查询及用 % 或 rem 作为单位，对不同视口设备进行编写样式。

rem弹性布局

布局特点：为了保证在各种屏幕上得不失真，就要根据实际屏幕宽度做等比换算。（一套方案，是不同尺寸、分辨率的视口呈现出较好的效果。）