• 响应式设计的实现方式

    一. 什么是响应式

    响应式网站设计是一种网络页面设计布局。页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整。

    响应式网站常见特点：

    1. 同时适配PC+平板+手机。

    2. 标签导航在接近手持终端设备时改变为经典的抽屉式导航。

    3. 网站的布局会根据视口来调整模块的大小和位置。

    响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了处理移动端，页面头部必须有meta声明viewport。

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"

    width=device-width: 是自适应手机屏幕的尺寸宽度

    maximum-scale: 是缩放比例的最大值

    inital-scale: 是缩放的初始化

    user-scalable: 是用户的可以缩放的操作

    二. 实现响应式布局的方式

    1. 媒体查询

    2. 百分比

    3. vw/vh

    4. rem

    1. 媒体查询

    CSS3中增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体查询，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。

    使用@media查询，为不同尺寸的屏幕设定不同的CSS样式

    1. @media screen and (max-width:1920px){...}
    2.  
    3. <style>
    4. #div0{
    5.     width: 150px;
    6.     height: 200px;
    7. }
    8. // 视口的宽度改变
    9. @media screen and (min-device-width:100px) and (max-device-width:300px){
    10.     #div0{
    11.         background-color: red;
    12.     }
    13. }
    14.  
    15. @media screen and (min-device-width:301px) and (max-device-width:500px){
    16.     #div0{
    17.         background-color: blue;
    18.     }
    19. }
    20. </style>

    @media常用参数

    属性名称作用
    width，height浏览器可视宽度，高度
    device-width设备屏幕的宽度
    device-height设备屏幕的宽度
    1. <style>
    2. div{
    3.     width: 200px;
    4.     height:200px;
    5. }
    6. // 浏览器的宽度改变
    7. @media screen and (min-width:500px) and (max-width:700px){
    8.     div{
    9.         background-color: red;
    10.     }
    11. }
    12.  
    13. @media screen and (min-width:701px){
    14.     div{
    15.         background-color: blue;
    16.     }
    17. }
    18. style>

    例子 

    1. <style>
    2.   #div0 {
    3.     width: 100%;
    4.     height: 500px;
    5.   }
    6.   #div0 div {
    7.     float: left;
    8.     height: 100px;
    9.   }
    10.   /* 1行三个div */
    11.   @media screen and (min-device-width:400px){
    12.     #div0 div {
    13.       width: 33.3%;
    14.     }
    15.     #div0 div:nth-child(1) {
    16.       background-color: red;
    17.     }
    18.     #div0 div:nth-child(2) {
    19.       background-color: blue;
    20.     }
    21.     #div0 div:nth-child(3) {
    22.       background-color: green;
    23.     }
    24.   }
    25.   /* 2行三个div */
    26.   @media screen and (min-device-width:300px) and (max-device-width:399px) {
    27.     #div0 div {
    28.       width: 50%;
    29.     }
    30.     #div0 div:nth-child(1) {
    31.       background-color: red;
    32.     }
    33.     #div0 div:nth-child(2) {
    34.       background-color: blue;
    35.     }
    36.     #div0 div:nth-child(3) {
    37.       background-color: green;
    38.     }
    39.   }
    40.   /* 3行三个div */
    41.   @media screen and (min-device-width:200px) and (max-device-width:299px) {
    42.     #div0 div {
    43.       width: 100%;
    44.     }
    45.     #div0 div:nth-child(1) {
    46.       background-color: red;
    47.     }
    48.     #div0 div:nth-child(2) {
    49.       background-color: blue;
    50.     }
    51.     #div0 div:nth-child(3) {
    52.       background-color: green;
    53.     }
    54.   }
    55. </style>
    56. <body>
    57.   <div id="div0">
    58.     <div></div>
    59.     <div></div>
    60.     <div></div>
    61.   </div>
    62. </body>

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

    1. <style>
    2.   #div0 {
    3.     width: 100%;
    4.     height: 500px;
    5.   }
    6.   #div0 div {
    7.     float: left;
    8.     height: 100px;
    9.   }
    10.   #div0 div:nth-child(1) {
    11.     background-color: red;
    12.   }
    13.   #div0 div:nth-child(2) {
    14.     background-color: blue;
    15.   }
    16.   #div0 div:nth-child(3) {
    17.     background-color: green;
    18.   }
    19. style>
    20. <style media="(min-device-width:300px) and (max-device-width:399px)">
    21.   #div0 div {
    22.     width: 50%;
    23.   }
    24. style>
    25. <style media="(min-device-width:400px) and (max-device-width:499px)">
    26.   #div0 div {
    27.     width: 33.33%;
    28.   }
    29. style>

    媒体查询其他引入方式——2（link引入） 

    1. // 写在Link标签中，有条件的引入外部样式表
    2. <link href="css/test.css" rel="stylesheet">
    3. <link href="css/css-1.css" rel="stylesheet" media="(min-device-width:100px) and (max-device-width:300px)">

    2. 百分比

    通过百分比单位%来实现响应式的效果。

    比如当浏览器的宽度或者高度发送变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

    height，width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素。

    3. vw/vh

    vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。

    任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

    4. rem

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

    默认情况下浏览器字体大小为16px。此时1rem = 16px

    可以针对不同的设备分辨率改变font-size的值。

    1. @media screen and (max-width: 414px) {
    2.     html{
    3.         font-size: 18px
    4.     }
    5. }
    6.  
    7. @media screen and (max-width: 375px) {
    8.     html{
    9.         font-size: 16px
    10.     }
    11. }
    12.  
    13. @media screen and (max-width: 320px) {
    14.     html{
    15.         font-size: 12px
    16.     }
    17. }
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <title></title>
    6.     <script>
    7.       let c = () => {
    8.         let w = document.documentElement.clientWidth // 获取设备的宽度
    9.         let n = (20 * (w / 320) > 40 ? 40 + "px" : 20 * (w / 320) + "px") // 根字体大小
    10.         document.documentElement.style.fontSize = n
    11.       }
    12.       window.addEventListener("load", c)
    13.       window.addEventListener("resize", c)
    14.     </script>
    15.     <style>
    16.       html {
    17.         font-size: 16px; // 页面一加载这里就会被重置替代
    18.       }
    19.  
    20.       div {
    21.         font-size: 1rem;
    22.       }
    23.     </style>
    24.   </head>
    25.   <body>
    26.     <div>123</div>
    27.   </body>
    28. </html>

    5. flex

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

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

    flex-direction：子元素在父元素盒子中的排列方式

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

    flex-wrap：子元素在父元素盒子中的是否换行

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

    flex-flow：flex-direction和flex-wrap属性的简写形式。语法：flex:||

    justify-content，用来在存在剩余空间时，设置为间距的方式

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

    align-items，设置每个flex元素在交叉轴上的默认对齐方式（单行看待）

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

    align-content，设置每个flex元素在交叉轴上的默认对齐方式（整体看待）

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

    两端都留有空白

    其他属性 

    属性值作用
    flex-basis设置弹性盒伸缩基准值（设置后，宽度将不再生效）
    flex-grow设置弹性盒子的扩展比率
    flex-shrink设置弹性盒子的缩小比率
    flexflex-grow，flex-shrink，flex-basis的缩写

    特殊写法 

    属性作用
    flex:autoflex: 1 1 auto
    flex: noneflex: 0 0 auto

    flex: 0%

    flex:100px

    flex: 1 1 0%

    flex: 1 1 100px

    flex:1flex: 1 1 0%

  • 相关阅读:
    区间预测 | Matlab实现CNN-ABKDE卷积神经网络自适应带宽核密度估计多变量回归区间预测
    深度学习归一化原理及代码实现(BatchNorm2d,LayerNorm,InstanceNorm,GroupNorm)
    电力巡检系统无人机模块
    【kali-漏洞扫描】（2.1）Nessus下载安装（上）
    Vue3 - 事件 API 新标准（如何在 Vue3 中怎么用事件总线实现兄弟组件通信？相比 Vue2 有什么不同？）
    2022最新软件测试八股文，已经帮助3000+测试员入职大厂....
    C++和QML混合编程_C++端后台多线程处理
    刷题记录:牛客NC16856[NOI1999]钉子和小球
    Steger算法实现结构光光条中心提取(python版本)
    多线程_线程插队_join()方法与锁的释放
  • 原文地址：https://blog.csdn.net/m0_66706006/article/details/133434186