首页 > 其他分享 >多端响应式

多端响应式

时间：2025-01-20 20:10:19浏览次数：1  
标签：lg 多端 xl width md 响应 sm col

重要！响应式开发

目录

是什么？

多终端显示不同，更好看
PC，ipad，手机适配

怎么实现？

媒体查询，断点：
视口宽不同，布局不同

移动端？？？
320-480端口
rem
不考虑大尺寸，更好体验

响应式：三端都可以看，但是适配没有移动端好看
成本低

媒体

媒体查询

检测不同媒体视口宽度

  1. @media关键字
  2. 媒体类型
    body{
        background-color: skyblue;
        color: #fff;
    }
    /*我们的设备是屏幕显示的css*/
    @media print{
        body{
        background-color: red;
        color: yellow;
        }/*打印机可见*/
    }
  1. 媒体特性
    可以忽略
    最小最大宽，横竖屏，像素比
    要2，3均满足，需要逻辑运算符号链接
/*当前任意设备，但是屏幕要大于等于400px才显示*/
    @media screen and (min-width:400px){
        body{
        background-color: red;

        }
    }

/*当前任意设备，但是屏幕要大于等于400px,小于等于500px才显示*/
    @media screen and (min-width:400px) and (max-width:500px){
        body{
        background-color: red;

        }
    }

像素比：移动端，根据手机的设备像素比设计css

横屏竖屏？
alt text

    @media screen and (orientation:landscape){
        body{
        background-color: red;

        }
    }

断点

是什么

满足对应窗口，出现对应样式，一定写在正常css代码之后

根据行业经验总结约定俗成的常见断点

xs：<576px 超小屏

sm：576~768px 小屏

md：768px~992px 中屏

lg：992px~1200px 大屏

xl：>=1200px 超大屏

适配方案

PC端：一般PC端优先，然后慢慢适配小屏效果,只需要使用 max-width 即可
移动端：移动端优先： 先考虑最小屏，再考虑大屏；只需要使用 min-width 即可

栅格布局

alt text
把容器分成？份
每份占比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row{
            display: flex;
            flex-wrap: wrap;
        }
        .col{
            box-sizing: border-box;
            border: 1px solid;
            height: 200px;
        }
    /* <!-- 容器分成12份 --> */
    /* <!-- 1份占的宽 --> */
        .col-1{
            width: 8.3333333%;
        }
        .col-2{
            width: 16.666666667%;
        }
        .col-3{
            width: 25%;
        }
        .col-4{
            width: 33.3333333%;

        }
        .col-5{
            width: 41.66667%;
        }
        .col-6{
            width: 50%;
        }
        .col-7{
            width: 58.33333333333%;
        }
        .col-8{
            width: 66.6666667%;

        }
        .col-9{
            width: 75%;
        }
        .col-10{
            width: 83.3333333%;
        }
        .col-11{
            width: 91.6666667%;
        }
        .col-12{
            width: 100%;
        }
    </style>
</head>
<body>
<!-- 将容器分成12份 -->
    <div class="row">
        <div class="col col-3">1</div>
        <div class="col col-3">2</div>
        <div class="col col-3">3</div>
        <div class="col col-3">4</div>
    </div>
    <div class="row">
        <div class="col col-4">1</div>
        <div class="col col-4">2</div>
        <div class="col col-4">3</div>
    </div>
    <div class="row">
        <div class="col col-6">1</div>
        <div class="col col-6">2</div>
    </div>
    <div class="row">
        <div class="col col-12">1</div>
    </div>
</body>
</html>

响应式栅格系统

xxl xl lg md sm 无缀名
x > 1400px 1200 < x <= 1400 992 < x <=1200 768 < x <= 992 576 < x <= 768 x <= 576

这些都是宽度的上限,只要小于上限就会起效
1400 1200 992 768 576

/* 
第一：我们将页面分成12分
第二：我们选择的断点是行业标准断点
第三：我们选择的适配方案，是PC端优先
*/

/* ....这里的css样式，会在屏幕宽大于1400px时生效.... */

.col-xxl-1 {
    width: 8.333333%;
  }
  .col-xxl-2 {
    width: 16.6666667%;
  }
  .col-xxl-3 {
    width: 25%;
  }
  
  .col-xxl-4 {
    width: 33.33333333%;
  }
  .col-xxl-5 {
    width: 41.66666667%;
  }
  .col-xxl-6 {
    width: 50%;
  }
  .col-xxl-7 {
    width: 58.33333333%;
  }
  .col-xxl-8 {
    width: 66.6666667%;
  }
  .col-xxl-9 {
    width: 75%;
  }
  .col-xxl-10 {
    width: 83.33333333%;
  }
  .col-xxl-11 {
    width: 91.66666667%;
  }
  .col-xxl-12 {
    width: 100%;
  }
  
  /* 当屏幕宽度大于1200px ，但小于等于1400px时，显示如下样式 */
  @media screen and (max-width: 1400px) {
    .col-xl-1 {
      width: 8.333333%;
    }
    .col-xl-2 {
      width: 16.6666667%;
    }
    .col-xl-3 {
      width: 25%;
    }
  
    .col-xl-4 {
      width: 33.33333333%;
    }
    .col-xl-5 {
      width: 41.66666667%;
    }
    .col-xl-6 {
      width: 50%;
    }
    .col-xl-7 {
      width: 58.33333333%;
    }
    .col-xl-8 {
      width: 66.6666667%;
    }
    .col-xl-9 {
      width: 75%;
    }
    .col-xl-10 {
      width: 83.33333333%;
    }
    .col-xl-11 {
      width: 91.66666667%;
    }
    .col-xl-12 {
      width: 100%;
    }
  }
  
  /* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */
  @media screen and (max-width: 1200px) {
    .col-lg-1 {
      width: 8.333333%;
    }
    .col-lg-2 {
      width: 16.6666667%;
    }
    .col-lg-3 {
      width: 25%;
    }
  
    .col-lg-4 {
      width: 33.33333333%;
    }
    .col-lg-5 {
      width: 41.66666667%;
    }
    .col-lg-6 {
      width: 50%;
    }
    .col-lg-7 {
      width: 58.33333333%;
    }
    .col-lg-8 {
      width: 66.6666667%;
    }
    .col-lg-9 {
      width: 75%;
    }
    .col-lg-10 {
      width: 83.33333333%;
    }
    .col-lg-11 {
      width: 91.66666667%;
    }
    .col-lg-12 {
      width: 100%;
    }
  }
  
  /* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */
  @media screen and (max-width: 992px) {
    .col-md-1 {
      width: 8.333333%;
    }
    .col-md-2 {
      width: 16.6666667%;
    }
    .col-md-3 {
      width: 25%;
    }
  
    .col-md-4 {
      width: 33.33333333%;
    }
    .col-md-5 {
      width: 41.66666667%;
    }
    .col-md-6 {
      width: 50%;
    }
    .col-md-7 {
      width: 58.33333333%;
    }
    .col-md-8 {
      width: 66.6666667%;
    }
    .col-md-9 {
      width: 75%;
    }
    .col-md-10 {
      width: 83.33333333%;
    }
    .col-md-11 {
      width: 91.66666667%;
    }
    .col-md-12 {
      width: 100%;
    }
  }
  
  /* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */
  @media screen and (max-width: 768px) {
    .col-sm-1 {
      width: 8.333333%;
    }
    .col-sm-2 {
      width: 16.6666667%;
    }
    .col-sm-3 {
      width: 25%;
    }
  
    .col-sm-4 {
      width: 33.33333333%;
    }
    .col-sm-5 {
      width: 41.66666667%;
    }
    .col-sm-6 {
      width: 50%;
    }
    .col-sm-7 {
      width: 58.33333333%;
    }
    .col-sm-8 {
      width: 66.6666667%;
    }
    .col-sm-9 {
      width: 75%;
    }
    .col-sm-10 {
      width: 83.33333333%;
    }
    .col-sm-11 {
      width: 91.66666667%;
    }
    .col-sm-12 {
      width: 100%;
    }
  }
  
  /* 当屏幕宽度小于等于576px时，显示如下样式 */
  @media screen and (max-width: 576px) {
    .col-1 {
      width: 8.333333%;
    }
    .col-2 {
      width: 16.6666667%;
    }
    .col-3 {
      width: 25%;
    }
  
    .col-4 {
      width: 33.33333333%;
    }
    .col-5 {
      width: 41.66666667%;
    }
    .col-6 {
      width: 50%;
    }
    .col-7 {
      width: 58.33333333%;
    }
    .col-8 {
      width: 66.6666667%;
    }
    .col-9 {
      width: 75%;
    }
    .col-10 {
      width: 83.33333333%;
    }
    .col-11 {
      width: 91.66666667%;
    }
    .col-12 {
      width: 100%;
    }
  }

运用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./media.css">
    <style>
        .row{
            display: flex;
            flex-wrap: wrap;
        }
        .col{
            box-sizing: border-box;
            background-color: skyblue;
            height: 100px;
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
<!-- 将容器分成12份 -->
<!-- 大于 1200px 显示  3列 
大于 992px 显示 2列
大于 768px 显示 1列 -->
    <div class="row">
        <div class="col col-xl-4 col-lg-6 col-md-12">1</div>
        <div class="col col-xl-4 col-lg-6 col-md-12">2</div>
        <div class="col col-xl-4 col-lg-6 col-md-12">3</div>
    </div>

</body>
</html>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./media.css">
    <style>
        .row{
            display: flex;
            flex-wrap: wrap;
        }
        .col{
            box-sizing: border-box;
            background-color: skyblue;
            height: 100px;
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <!-- 12个，
    当视口宽 >1200px 时，以显示4 3 2 1
    当视口宽 <= 1200px 时，显示2 3 2 1
    当视口宽 <= 992px 时，显示2 2 1 1
    当视口宽 <= 768px 时，1 1 1 1同时上面的导航变成点击下拉菜单形式 -->
    <div class="row">
<!-- 1200 768 xl sm -->
        <div class="col col-xxl-3 col-xl-6 col-sm-12">1</div>
        <div class="col col-xxl-3 col-xl-6 col-sm-12">1</div>
        <div class="col col-xxl-3 col-xl-6 col-sm-12">1</div>
        <div class="col col-xxl-3 col-xl-6 col-sm-12">1</div>
    </div>
    <div class="row">
<!--992 768 md sm -->
        <div class="col col-xxl-4  col-md-6 col-sm-12">2</div>
        <div class="col col-xxl-4  col-md-6 col-sm-12">2</div>
        <div class="col col-xxl-4  col-md-6 col-sm-12">2</div>
    </div>
    <div class="row">
<!-- 992 lg -->
        <div class="col col-xxl-6 col-lg-12">3</div>
        <div class="col col-xxl-6 col-lg-12">3</div>
    </div>
    <div class="row">
        <div class="col col-xxl-12">4</div>
    </div>

</body>
</html>

p.s.其实twcss已经完美解决这个问题了，当然也可以自己外链media.css，都行

标签：lg,多端,xl,width,md,响应,sm,col
From： https://www.cnblogs.com/GJ504b/p/18682455

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99