devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

学习响应式布局_@media screen

作者：我家自动化 | 2024-03-29 10:05:08

赞

踩

@media screen

针对性内容

  • 页面设计在不同设备的显示情况
  • 布局只会使用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. <!DOCTYPE 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>Document</title>
  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设备屏幕的高度
  1. <style>
  2.         #div0{
  3.             width: 200px;
  4.             height: 300px;
  5.         }
  6.         /* 浏览器尺寸在200px到300px之间的样式 */
  7.         @media screen and (min-width:500px) and (max-width:700px){
  8.             #div0{
  9.                 background-color: red;
  10.             } 
  11.             /* 
  12.                 可以写其他的样式 
  13.             */
  14.         }
  15.         @media screen and (min-width:701px){
  16.             #div0{
  17.                 background-color: blue;
  18.             }
  19.         }
  20. </style>

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

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

  1. <!DOCTYPE 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>Document</title>
  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. <!DOCTYPE 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>Document</title>
  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. <!DOCTYPE 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>Document</title>
  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>1</div>
  23.         <div>2</div>
  24.         <div>3</div>
  25.         <div>4</div>
  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平均分布在该行上，两边留有一半的间隔空间
  1. <style>
  2.         #div0{
  3.             width: 350px;
  4.             background-color: yellowgreen;
  5.             display: flex;
  6.             flex-flow: row wrap;
  7.             /* flex-direction: row;
  8.             flex-wrap: wrap-reverse; */
  9.             justify-content: center;
  10.             /*justify-content: space-between;*/
  11.         }
  12.         #div0 div {
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: red;
  16.         }
  17.     </style>

 

 

 align-items

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

属性值作用
flex-start位于容器的开头
flex-end位于容器的结尾
center居中显示
  1.    <style>
  2.         #div0{
  3.             width: 400px;
  4.             height: 400px;
  5.             background-color: yellowgreen;
  6.             display: flex;
  7.             flex-flow: column wrap;
  8.             justify-content: space-between;
  9.             align-items: flex-end;
  10.         }
  11.         #div0 div {
  12.             width: 100px;
  13.             height: 100px;
  14.             background-color: red;
  15.         }
  16.     </style>

 

 

  1.  <style>
  2.         #div0{
  3.             width: 400px;
  4.             height: 400px;
  5.             background-color: yellowgreen;
  6.             display: flex;
  7.             flex-flow: row wrap;
  8.             justify-content: space-between;
  9.             align-items: flex-end;
  10.         }
  11.         #div0 div {
  12.             width: 100px;
  13.             height: 100px;
  14.             background-color: red;
  15.         }
  16.     </style>

 align-content

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

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

属性值作用
flex-start位于容器的开头
flex-end位于容器的结尾
center位于容器的中心
space-between之间留有空白
space-around两端都留有空白
  1.    <style>
  2.         #div0{
  3.             width: 380px;
  4.             height: 400px;
  5.             background-color: yellowgreen;
  6.             display: flex;
  7.             flex-flow: row wrap;
  8.             justify-content: space-between;
  9.             align-items: center;
  10.         }
  11.         #div0 div {
  12.             width: 100px;
  13.             height: 100px;
  14.             background-color: red;
  15.         }
  16.     </style>

 

  1.  <style>
  2.         #div0{
  3.             width: 380px;
  4.             height: 400px;
  5.             background-color: yellowgreen;
  6.             display: flex;
  7.             flex-flow: row wrap;
  8.             justify-content: space-between;
  9.             align-content: center;
  10.         }
  11.         #div0 div {
  12.             width: 100px;
  13.             height: 100px;
  14.             background-color: red;
  15.         }
  16.     </style>

 其他属性

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

flex-basis

  1. <!DOCTYPE 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>Document</title>
  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可能出现集联等情况，计算会繁琐。

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/335231
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号