• 学习响应式布局

    针对性内容

    • 页面设计在不同设备的显示情况
    • 布局只会使用float+定位，而不会掌握flex
    • 不能很好的使用rem作为设计单位
    • 掌握响应式布局、弹性等常见布局

    学习内容

    • css中媒体查询的作用和使用方法
    • flex弹性盒子的用法
    • rem的作用和使用方法

    目录

    针对性内容

    学习内容

    MediaQuery（媒体查询） 

     @media常用参数

    媒体查询其他引入方式---1

    媒体查询其他引入方式---2

    flex弹性布局

    flex-direction

    flex-wrap

     flex-flow

    剩余空间调整为间距 justify-content

     align-items

     align-content

     其他属性

    flex-basis

     flex-grow

    flex-shrink

     flex

    特殊写法

    rem的使用

    MediaQuery（媒体查询） 

    主要是为了不同尺寸的屏幕设定不同的css样式（移动端用的较多）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #div0{
    10.             width: 100px;
    11.             height: 200px;
    12.         }
    13.         /* 屏幕尺寸在200px到300px之间的样式 */
    14.         @media screen and (min-device-width:200px) and (max-device-width:300px){
    15.             #div0{
    16.                 background-color: red;
    17.             }
    18.             /* 
    19.                 可以写其他的样式 
    20.             */
    21.         }
    22.         @media screen and (min-device-width:301px) and (max-device-width:500px){
    23.             #div0{
    24.                 background-color: blue;
    25.             }
    26.         }
    27.     style>
    28. head>
    29. <body>
    30.     <div id="div0">div>
    31. body>
    32. html>

     

     @media常用参数

    属性名称作用
    width、height 浏览器可视宽度、高度
    device-width设备屏幕的宽度
    device-height设备屏幕的高度

    获取浏览器的宽度 min-width max-width

    小案例：让三个块随着屏幕变化从一行放3个变成一行2个和一行1个

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #div0{
    10.             width: 100%;
    11.             height: 500px;
    12.         }
    13.         #div0 div {
    14.             float: left;
    15.             height: 200px;
    16.         }
    17.         /* 1行显示三个div */
    18.         @media screen and (min-device-width:400px){
    19.             #div0 div {
    20.                 width: 33.3%;
    21.             }
    22.             #div0 div:nth-child(1){
    23.                 background-color: red;
    24.             }
    25.             #div0 div:nth-child(2){
    26.                 background-color: blue;
    27.             }
    28.             #div0 div:nth-child(3){
    29.                 background-color: green;
    30.             }
    31.         }
    32.         /* 2行显示三个div */
    33.         @media screen and (min-device-width:300px) and (max-device-width:399px){
    34.             #div0 div {
    35.                 width: 50%;
    36.             }
    37.             #div0 div:nth-child(1){
    38.                 background-color: red;
    39.             }
    40.             #div0 div:nth-child(2){
    41.                 background-color: blue;
    42.             }
    43.             #div0 div:nth-child(3){
    44.                 background-color: green;
    45.             }
    46.         }
    47.         /* 3行显示三个div */
    48.         @media screen and (max-device-width:299px){
    49.             #div0 div {
    50.                 width: 100%;
    51.             }
    52.             #div0 div:nth-child(1){
    53.                 background-color: red;
    54.             }
    55.             #div0 div:nth-child(2){
    56.                 background-color: blue;
    57.             }
    58.             #div0 div:nth-child(3){
    59.                 background-color: green;
    60.             }
    61.         }
    62.     style>
    63. head>  
    64. <body>
    65.     <div id="div0">
    66.         <div>div>
    67.         <div>div>
    68.         <div>div>
    69.     div>
    70. body>
    71. html>

     

     

    媒体查询其他引入方式---1

    写在style标签中，有条件的执行某个内部样式表

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #div0{
    10.             width: 100%;
    11.             height: 500px;
    12.         }
    13.         #div0 div {
    14.             float: left;
    15.             height: 200px;
    16.         }
    17.         #div0 div:nth-child(1){
    18.             background-color: red;
    19.         }
    20.         #div0 div:nth-child(2){
    21.             background-color: blue;
    22.         }
    23.         #div0 div:nth-child(3){
    24.             background-color: green;
    25.         }
    26.     style>
    27.     <style media="(min-device-width:300px) and (max-device-width:399px)">
    28.         #div0 div {
    29.             width: 50%;
    30.         }
    31.     style>
    32.     <style media="(min-device-width:400px) and (max-device-width:499px)">
    33.         #div0 div {
    34.             width: 33.3%;
    35.         }
    36.     style>
    37. head>  
    38. <body>
    39.     <div id="div0">
    40.         <div>div>
    41.         <div>div>
    42.         <div>div>
    43.     div>
    44. body>
    45. html>

    媒体查询其他引入方式---2

    写在link标签中，有条件的引入外部样式表

    1. <link href="css/test.css" rel="stylesheet">
    2.  
    3.  
    4. <link href="css/css1.css" rel="stylesheet"
    5. 		media="(min-device-width:300px) and (max-device-width:399px)">

     

    flex弹性布局

    Flexiable Box即为弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题

    用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

    更加符合响应式设计的特点

    主轴和交叉轴并不是固定的，而是需要看里面元素的排列方式。如上图所示，子元素是水平排列的，所以水平方向就是主轴，竖直方向就是交叉轴。 如果子元素是竖直排列的，则竖直方向就是主轴。

    子元素不说 高和宽， 而是说 占主轴的多少，占交叉轴的多少

    flex-direction

    作用： 子元素在父元素盒子中的排列方式

    属性值作用
    row默认值。按从左到右的顺序显示
    row-reverse与row相同，但是以相反的顺序
    column灵活的项目将垂直显示，按从上到下的顺序
    column-reverse与column相同，但是以相反的顺序

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #div0{
    10.             width: 500px;
    11.             background-color: yellowgreen;
    12.         }
    13.         #div0 div {
    14.             width: 100px;
    15.             height: 100px;
    16.             background-color: red;
    17.         }
    18.     style>
    19. head>  
    20. <body>
    21.     <div id="div0">
    22.         <div>1div>
    23.         <div>2div>
    24.         <div>3div>
    25.         <div>4div>
    26.     div>
    27. body>
    28. html>

     (左)： display: flex; flex-direction: column; （右） flex-direction: column-reverse;

     

     （上）flex-direction: row （下）flex-direction: row-reverse;

    上述例子是父元素的宽度足够大（500px），如果父元素的宽度不够，只有300p。则会对子元素的宽度进行压缩，使得四个子元素都能放在父元素中（每个子元素的宽度都变为了75px） 

    flex-wrap

    作用： 子元素在父元素盒子中是否换行（列） 

    属性值作用
    nowrap默认值。不换行或不换列
    wrap换行或换列
    wrap-reverse换行或换列，但以相反的顺序

     

    1. <style>
    2.         #div0{
    3.             width: 300px;
    4.             background-color: yellowgreen;
    5.             display: flex;
    6.             flex-direction: row;
    7.             flex-wrap: wrap;
    8.         }
    9.         #div0 div {
    10.             width: 100px;
    11.             height: 100px;
    12.             background-color: red;
    13.         }
    14.     style>

    在上面的例子中，如果父元素的宽度只有300px，不够4个子元素一行放置，他会压缩子元素的宽。

    但如果设置了换行，则子元素的宽还是100px，多余的会进行换行

     wrap                                                     wrap-reverse

     flex-flow

    作用： flex-direction和flex-wrap属性的简写形式

    1. 语法：
    2. flex-flow: <flex-direction> || <flex-wrap>
    3.  
    4. 如
    5. display: flex;
    6. flex-flow: row wrap;
    7. /* flex-direction: row;
    8. flex-wrap: wrap-reverse; */

    剩余空间调整为间距 justify-content

    作用：用来在存在剩余空间时，设置为间距的方式

    属性值作用
    flex-start默认值。从左到右，挨着行的开头
    flex-end从右到左，挨着行的结尾
    center居中显示
    space-between平均分布在该行上，两边不留间隔空间
    space-around平均分布在该行上，两边留有一半的间隔空间

     

     

     align-items

    作用：设置每个flex元素在交叉轴上的默认对齐方式

    属性值作用
    flex-start位于容器的开头
    flex-end位于容器的结尾
    center居中显示
    1.

     

     

    1.

     align-content

    作用：设置每个flex元素在交叉轴上的默认对齐方式

    与align-items的区别就是 align-items会把每一行都单独处理，而align-content把多行当成一个整体处理

    属性值作用
    flex-start位于容器的开头
    flex-end位于容器的结尾
    center位于容器的中心
    space-between之间留有空白
    space-around两端都留有空白
    1.

     

    1.

     其他属性

    属性值作用
    flex-basis设置弹性盒伸缩基准值
    flex-grow设置弹性盒子的扩展比率
    flex-shrink设置弹性盒子的缩小比率
    flexflex-grow、flex-shrink、flex-basis的缩写

    flex-basis

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #div0{
    10.             display: flex;
    11.             width: 400px;
    12.             height: 500px;
    13.             background-color: violet;
    14.         }
    15.         #div0 div {
    16.             width: 200px;
    17.             height: 200px;
    18.             background-color: red;
    19.         }
    20.     style>
    21. head>  
    22. <body>
    23.     <div id="div0">
    24.         <div>div>
    25.         <div>div>
    26.     div>
    27. body>
    28. html>

     先搞一个基础的，子盒子宽为200px，父盒子宽为400px，所以图中两个子盒子贴在一起

    1. #div0 div {
    2.             width: 200px;
    3.             height: 200px;
    4.             background-color: red;
    5.             flex-basis: 50px;
    6.             /* flex-basis: 30%; */
    7. }

    给子盒子加上基准以后，原来的宽度200px就不生效了，变成了两个都是50px的宽。也可以设置百分比，30%就是400px*0.3 = 120px 。 也可以用rem单位 

    也可以分别用于不同的元素

    1.   <style>
    2.         #div0{
    3.             display: flex;
    4.             width: 400px;
    5.             height: 500px;
    6.             background-color: violet;
    7.         }
    8.         #div0 div {
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.             flex-basis: 50px;
    13.             /* flex-basis: 30%; */
    14.         }
    15.         #div0 div:nth-child(1){
    16.             flex-basis: 50px;
    17.         }
    18.         #div0 div:nth-child(2){
    19.             flex-basis: 100px;
    20.         }
    21.     style>

     

     flex-grow

    主要是用于子对象不足以填充满父对象的宽度。 就比如上面的例子中，两个子对象都是50px，宽度还剩下300px

    1.     <style>
    2.         #div0{
    3.             display: flex;
    4.             width: 400px;
    5.             height: 500px;
    6.             background-color: violet;
    7.         }
    8.         #div0 div {
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.             flex-basis: 50px;
    13.         }
    14.         /* 
    15.             flex-grow的具体算法
    16.             整体父盒子宽度为400px， 第一个div 50px，第二个div 100px，还剩下250px的空闲区
    17.             由于两个子div的flex-grow都是1，所以250分成2份，各1份    250/2=125px
    18.         */
    19.         #div0 div:nth-child(1){
    20.             flex-basis: 50px;
    21.             flex-grow: 1;
    22.         }
    23.         #div0 div:nth-child(2){
    24.             flex-basis: 100px;
    25.             flex-grow: 1;
    26.         }
    27.     style>

    如果第一个子div flex-grow:1; 第二个子div flex-grow:3； 则一共把250px的剩余分4份，第一个占1份 

    flex-shrink

    一般用于子元素宽度较高，放不下，这时候考虑缩小比率

    1.   <style>
    2.         #div0{
    3.             display: flex;
    4.             width: 400px;
    5.             height: 500px;
    6.             background-color: violet;
    7.         }
    8.         #div0 div {
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.             flex-basis: 50px;
    13.         }
    14.         #div0 div:nth-child(1){
    15.             flex-basis: 300px;
    16.         }
    17.         #div0 div:nth-child(2){
    18.             flex-basis: 300px;
    19.         }
    20.     style>

     设置两个子盒子都是300px，让他们两个的宽度和 超过400。发现他们自动缩小成200 200了

     

    1.  <style>
    2.         #div0{
    3.             display: flex;
    4.             width: 400px;
    5.             height: 500px;
    6.             background-color: violet;
    7.         }
    8.         #div0 div {
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.             flex-basis: 50px;
    13.         }
    14.         #div0 div:nth-child(1){
    15.             flex-basis: 300px;
    16.             flex-grow: 1;
    17.             /* 0代表不允许缩小 */
    18.             flex-shrink: 0;
    19.         }
    20.         #div0 div:nth-child(2){
    21.             flex-basis: 300px;
    22.             flex-grow: 1;
    23.             flex-shrink: 0;
    24.         }
    25.     style>

    设置flex-shrink:0 让他们不能缩小，这时候两个子盒子都是300px，且超出了父元素的宽

    1.  <style>
    2.         #div0{
    3.             display: flex;
    4.             width: 400px;
    5.             height: 500px;
    6.             background-color: violet;
    7.         }
    8.         #div0 div {
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.             flex-basis: 50px;
    13.         }
    14.         /* 
    15.             flex-shrink算法
    16.             400 - 600 = -200
    17.             200 / (1+3) = 50
    18.             所以第一个div是 300 - 50 = 250   第二个div是 300 - 150 = 150
    19.         */
    20.         #div0 div:nth-child(1){
    21.             flex-basis: 300px;
    22.             flex-grow: 1;
    23.             /* 0代表不允许缩小 */
    24.             flex-shrink: 1;
    25.         }
    26.         #div0 div:nth-child(2){
    27.             flex-basis: 300px;
    28.             flex-grow: 1;
    29.             flex-shrink: 3;
    30.         }
    31.     style>

     

     flex

    当写缩写的时候，一定要注意顺序 先 flex-grow扩大比率、再 flex-shrink缩小比率，最后 flex-basis基准值

    1.   <style>
    2.         #div0{
    3.             display: flex;
    4.             width: 400px;
    5.             height: 500px;
    6.             background-color: violet;
    7.         }
    8.         #div0 div {
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.             flex-basis: 50px;
    13.         }
    14.         #div0 div:nth-child(1){
    15.             /* flex-basis: 300px;
    16.             flex-grow: 1;
    17.             flex-shrink: 1; */
    18.             flex: 1 1 300px;
    19.         }
    20.         #div0 div:nth-child(2){
    21.             /* flex-basis: 300px;
    22.             flex-grow: 4;
    23.             flex-shrink: 3; */
    24.             flex: 4 3 300px;
    25.         }
    26.     style>

    特殊写法

    属性作用
    flex:auto;flex: 1 1 auto;
    flex: none;flex: 0 0 auto
    flex: 0%; flex: 100px;flex: 1 1 0% flex: 1 1 100px
    flex: 1;flex: 1 1 0%;

    rem的使用

    指相对于根元素的字体大小的单位

    1.     <style>
    2.         html{
    3.             /* 根字体的大小,如果要搭配rem使用，通常会设置为10px 这样方便计算 */
    4.             font-size: 10px;
    5.         }
    6.         div{
    7.             font-size: 1rem;
    8.         }
    9.     style>

    这样的话，div的字体大小就是1rem也就是10px； 这样的好处就是如果随着屏幕的变化，需要改变字体大小的话，只需要改根字体即可

    与em的区别有哪些？

    rem是相对于根字体而言的， 而 em是相对于父一级的对象而言的。所以em可能出现集联等情况，计算会繁琐。

     

  • 相关阅读:
    Web APIs 第03天上
    基于注意力机制的深度协同推荐模型
    【数据结构与算法】手撕链表OJ题
    使用centos搭建内网的yum源
    【PAT甲级】1061 Dating
    C语言实现双人贪吃蛇项目（基于控制台界面）
    Neo4j - 数据库备份和恢复
    crlfuzz&crlfsuite
    C# 第二章『基础语法』◆第4节：foreach循环语句
    基于Android studio的个人日程时间管理系统java
  • 原文地址：https://blog.csdn.net/m0_56698268/article/details/127983000