⾃媒体查询、flex弹性布局、响应式布局及rem布局
功能简介：
⾃媒体查询 常⽤在适配不同的设备显⽰场景下，根据屏幕⼤⼩显⽰不同页
⾃媒体查询、rem布局、响应式布局技术，是三个不同的技术。 ⾃媒体查询
rem布局 它是⼀个长度单位，这个长度单位是根据‘根元素’的字体⼤⼩的单位确定的（根元素字体⼤⼩⾯，但功能⼤致不变的这么⼀个技术。rem布局
响应式布局和⾃媒体查询响应式布局 它是在页⾯宽度改变时，整个页⾯或者页⾯中的局部随着页⾯的缩放进⾏响应并实时变化（响应式布局和⾃媒体查询= 1rem）。响应式布局
有区别）。在如今复杂的开发中这⼏个技术越来越密不可分，在项⽬中可以通过实际需求进⾏搭配。
有区别
⾃媒体查询：
功能：⾃媒体查询主要是设置不同的设备屏幕下的显⽰样式。
功能：
获取浏览器或设备宽度：
获取浏览器或设备宽度：
min-device-width （设备的宽度）\  min-width  (浏览器的宽度)  （注释：也可以获取⾼度，就是将width改写成height） ⽅法：
⽅法：
flex布局对齐方式公共部分：
公共部分：
<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 = LowerCase()  //获取设备信息
let device = /ipad|iphone|midp|rv:1.2.3.4|ucwed|android|windows ce|windows mobile/  //适配不同设备
st(userAgent)){
window.location.href = 'move.html'  //跳转移动端页⾯
}else{
window.location.href='pc.html'  //跳转PC端页⾯
}
}
redireat()
</script>
响应式布局
布局特点：确保⼀个页⾯在所有终端上，都能显⽰出令⼈满意的效果。（⼀套⽅案，处处运⾏。）
设计思路：使⽤⾃媒体查询及⽤ % 或 rem 作为单位，对不同视⼝设备进⾏编写样式。
rem弹性布局
布局特点：为了保证在各种屏幕上得不失真，就要根据实际屏幕宽度做等⽐换算。（⼀套⽅案，是不同尺⼨、分辨率的视⼝呈现出较好的效果。）
设计思路：使⽤⾃媒体查询及⽤ % 或 rem 作为单位，对不同视⼝设备进⾏编写样式。
总结：
在项⽬开发中，根据项⽬的实际情况选择不同的技术的搭配，这样才能实现业务的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。