响应式布局~220728-220731

参考学习视屏：https://www.bilibili.com/video/BV1ov411k7sm?spm_id_from=333.337.search-card.all.click&vd_source=d0acf1b50d58a251fbd395d941b1268c
笔记：

1.~~~ 响应式页面; 参考学习视屏： https://www.bilibili.com/video/BV1ov411k7sm?p=2&spm_id_from=pageDriver&vd_source=d0acf1b50d58a251fbd395d941b1268c 2.~~~ 媒体查询;

2.1 为不同尺寸的屏幕设定不同的CSS样式
@media screen and (min-device-width: 100px) and (max-device-width: 300px) {在这里正常书写样式}
//表示这个区间中的样式展现;
2.2 @media常用参数
width、height
代表的是浏览器可视宽度、高度
device-width，device-height
代表的是设备屏幕的宽度，高度
2.3 媒体查询的引入方式;
2.3.1 内部样式表
//
2.3.2 外部样式表；
"<link href="css/css-1.css"rel="stylesheet" >"
media="(min-device-width:100px)and (max-device-width:300px)">//当满足条件才会引入;
2.3.3
3.~~~ flex；
3.1
根据子元素的排列方向分主轴(main axis)，交叉轴(cross axis);
3.2
元素所占的空间，分为主轴空间，交叉轴空间;
3.3 flex-direction;
控制主轴方向;
row
默认值。按从左到右的顺序显示。
row-reverse
与row相同，但是以相反的顺序。
column
灵活的项目将垂直显示，按从上到下的顺序。
column-reverse
与column相同，但是以相反的顺序。
3.4 在父级中使用；
先开启 display：flex；
然后即可设置弹性布局了;
3.4.1 flex-direction:wrap;//排序方式;
3.4.2 flex-wrap:nowrap;
nowrap
默认值。不换行或不换列。
wrap
换行或换列。
wrap-reverse
换行或换列，但以相反的顺序。
//决定子元素在父元素盒子中的是否换行（列）
就不会对子元素的固定大小进行压缩了;
3.4.3 flex-flow;
//flex-direction和flex-wrap属性的简写形式
flex-flow: ||
eg: flex-flow:row wrap;
3.4.4 jusitify-content：；
处理空白区域
flex-start
默认值。从左到右，挨着行的开头。
flex-end
从右到左，挨着行的结尾。
center
居中显示。
space-between
平均分布在该行上，两边不留间隔空间。
space-around
平均分布在该行上，两边留有一半的间隔空间。

//作用：用来在主轴存在剩余空间时，设置剩余空间的存放位置；
3.4.5 align-items:;
控制每个交叉轴单行的位置;
stretch//默认值;
flex-start
位于容器的开头。
flex-end
位于容器的结尾
center
居中显示。

//设置每个flex元素在交叉轴上的默认对齐方式 ,处理的是单行;
3.4.6 align-content:;
控制交叉轴上整体的位置;
flex-start
位于容器的开头。
flex-end
位于容器的结尾。
center
位于容器的中心。
space-between
之间留有空白。
space-around
两端都留有空白。

//设置每个flex元素在交叉轴上的默认对齐方式,将多行当作是整体，处理的是整体；
3.4.7
3.5 在子级中使用;
3.5.1
flex-basis
eg:flex-basis:50px/设置此属性后，自身的width失效/
设置弹性盒伸缩基准值。
3.5.2
flex-grow
eg:flex-grow:1 //表示此子级在父级中所占的份数;
前提是得有剩余空间,然后通过子级将父级中的剩余空间全部铺满;
设置弹性盒子的扩展比率。
3.5.3
flex-shrink ：1；
相反这个是无剩余空间，且子级大于父级，设置份数，就会以超出部分作为总的，然后每个子级得减去所占份数,才是最终的宽；
设置弹性盒子的缩小比率。
3.5.4 简写方式;
flex :1 1 300px；
//flex-grow、flex-shrink、flex-basis的缩写，得按照这样的顺序来写;
3.6 flex的特殊写法;
flex:auto; //表示：flex：1 1 auto;
flex:none;//表示：flex：0 0 auto;显示自身宽度
flex:0%;//表示：flex：1 1 0%;
flex:100px;//表示：flex：1 1 100px;
flex:1;//表示：flex：1 1 0%;
4.~案例;
4.1
5.~ 常用布局;
5.1 rem;
指相对于根元素的字体大小的单位;
通常情况下是将html的font-size设置成10px;
5.2 通过获取设备的宽度；
let w = document.documentElement.clientWidth;
let n=(20(w/328)>40?40+"px":(28(w/328)+"px");
document.documentElement.style.fontsize=n;
//来设置根字体大小;
//用到了load和resize两个事件监听器;
6.~~~ 自适应布局；
6.1 不同设备对应不同的html （在js中设置）
eg：
<script type="text/javascript">
var redirect=()=>{
/获取设备的信息
let userAgent = navigator.userAgent.toLowerCase();
//
正则表达式，判断设备类型
let device =/ipad|iphone|midp|rv:1.2.3.4|ucwebl android|w
if (device.test(userAgent)){
//跳转移动端页面
window.location.href="move.html";
else
/跳转pc端页面
window.location.href="pc.html";
redirect();
</script>
6.2 局部自适应
用到的就是flex弹性;
结合媒体查询来一起使用;
6.3
7.~~~ 响应式布局;
确保一个页面在所有终端上，都能显示出令
人满意的效果
7.1
用到了嵌套使用flex，然后利用link引入且限定使用区间(media="(min-device-width:1000px)")
8.~~~ rem弹性布局;
为了保证在各种屏幕上的不失真，就要根据
实际屏幕宽度做等比例换算
8.1