响应式布局学习笔记(多屏幕尺寸使用同一套前端代码)

发布于：2022-12-25 ⋅ 阅读:(191) ⋅ 点赞:(0)

媒体查询

  • 为不同尺寸的屏幕设定不同的css样式

媒体查询的参数

  • 1.width , height 浏览器可视宽度，高度（注意拉动的位置）
  • 2.device-width 设备屏幕的宽度
  • 3.device-height 设备屏幕的高度

尺寸的顺序

  • 屏幕尺寸由小到大
  • 代码开头由max-device-width --> (min and max) --> max

flex布局

  • 1.flexiableBox 即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。
  • 2.符合响应式的特点
  • 主轴： 如果横向排列，x为主轴，y为交叉轴，纵向反之。
  • 交叉轴：如上。

flex-direction 方向设定

  • 1.row 默认值，按左到右横向显示
  • 2.row-reverse ， 由右向左
  • 3.column ， 垂直显示，由上到下
  • 4.column-reverse ， 由下到上

flex-wrap 是否换行

  • 1.nowrap 默认值，不换行，不换列
  • 2.wrap 换行换列
  • 3.wrap-reverse 换行或换列，但以相反顺序。

flex-flow 简写模式 表示排序，换行。

  • flex-flow:row wrap;

justify-content 处理剩余空间，间距

  • 1.flex-start 从左到右挨着
  • 2.flex-end 从右到左挨着
  • 3.center 居中显示
  • 4.space-between 平均分布，两边不留间隔空间。
  • 5.space-around 平均分布，两边留有一半间隔空间

align-items 设置每个flex元素在交叉轴上的默认对齐方式，实现子元素上中下。

  • 1.flex-start 位于容器开头
  • 2.flex-end 位于容器结尾
  • 1.center 居中

其他属性，设置子对象

  • 1.flex-basis 设置弹性盒模型伸缩基准值。
  • 2.flex-grow 设置弹性盒子的扩展比率
  • 3.flex-shrink 设置弹性盒子的缩小比率
  • 4.flex 以上三种的所需。
  • 特殊写法及含义
    • 1.flex:auto 作用flex:1 1 auto
    • 2.flex:none 作用flex:0 0 auto
    • 3.flex:0% 作用flex:1 1 0%
    • 4.flex:100px 作用flex:1 1 100px
    • 5.flex:1 作用flex:1 1 0%

rem的使用方法

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

em 有继承关系干扰。

体验媒体查询代码：

    <style>
        #div0 {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
        @media screen and (min-device-width: 200px) and (max-device-width: 300px) {
            #div0 {
                background-color: red;
            }
        }
        @media screen and (min-device-width: 301px) and (max-device-width: 500px) {
            #div0 {
                background-color: blue;
            }
        }
    </style>

媒体查询参数设置

    <style>
        #div0 {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
        /* 监听的是浏览器的宽度 */
        @media screen and (min-width: 200px) and (max-width: 700px) {
            #div0 {
                background-color: red;
            }
        }
        @media screen and (min-width: 701px) {
            #div0 {
                background-color: blue;
            }
        }
    </style>

案例分享，三行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div0 {
            width: 100%;
            /* height: 200px; */
            /* background-color: aqua; */
        }
        #div0 div {
            float: left;
            /* border: 1px solid #000; */
            height: 50px;
            /* width: 33%; */
        }
        #div0 div:nth-child(1){
            background-color: red;
        }
        #div0 div:nth-child(2){
            background-color: green;
        }
        #div0 div:nth-child(3){
            background-color: blue;
        }
        /* 显示1行，三个div */
        @media screen and (max-device-width: 768px) {
            #div0 div {
                width: 100%;
            }
        }
        /* 显示2行，三个div */
        @media screen and (min-device-width: 769px) and (max-device-width:800px) {
            #div0 div {
                width: 50%;
            }
        }
        /* 显示3行，三个div */
        @media screen and (min-device-width: 801px){
            #div0 div {
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div id="div0">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

媒体查询外部样式引用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里使用外部样式导入 -->
    <link rel="stylesheet" href="./css/css1.css" media="(max-device-width: 768px)">
    <link rel="stylesheet" href="./css/css2.css"
    media="(min-device-width: 769px) and (max-device-width:800px)">
    <link rel="stylesheet" href="./css/css3.css"
    media="(min-device-width: 801px)">
    <style>
        #div0 {
            width: 100%;
            /* height: 200px; */
            /* background-color: aqua; */
        }
        #div0 div {
            float: left;
            /* border: 1px solid #000; */
            height: 50px;
            /* width: 33%; */
        }
        #div0 div:nth-child(1){
            background-color: red;
        }
        #div0 div:nth-child(2){
            background-color: green;
        }
         #div0 div:nth-child(3){
            background-color: blue;
         }
    </style>
</head>
<body>
    <div id="div0">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

flex布局演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{
            display: flex;
            width: 500px;
            /* 排序 */
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column;
            flex-direction: column-reverse; */
            /* 是否换行 */
            flex-wrap: wrap;
            /* 简写换行，换列 */
            /* flex-flow:row wrap; */
        }
        #a div{
            /* flex: 1; */
            width: 200px;
            height: 50px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="a">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

flex 属性设置含有计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{
            display: flex;
            width: 400px;
            height: 500px;
            background-color: darkgray;
        }
        #a div{
            width: 120px;
            height: 50px;
            border: 1px solid #000;
            background-color: aquamarine;
            /* 子对象的宽度，width会失效 */
            /* flex-basis: 50px; */
            /* 相对父级 */
            /* flex-basis: 10px;  */
        }
        /* 
        120 - 10 - 50 = 60
        60 / (1 + 1) = 30
        左： 10 + 30
        右： 50 + 30
        */
        #a div:nth-child(1){
            flex-basis: 10px;
            flex-grow: 1;
            background-color: bisque;
        }
        #a div:nth-child(2){
            flex-basis: 50px;
            flex-grow: 1;
            /* 是否允许缩小，处理超出的部分，如果子集超出了盒子，需要将子集缩小。 */
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div id="a">
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

rem尺寸的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var c=()=>{
            // n 表示初始化时，字体大小
            // 20 表示初始化时的字体大小，
            // 768 主流屏幕的大小
            let w = document.documentElement.clientWidth
            let n = (20*(w/768)>40?40+'px':((20*(w/768))+ 'px'))
            document.documentElement.style.fontSize = n
        }
        window.addEventListener('load',c)
        window.addEventListener('resize',c)
    </script>
    <style>
        html{
            /* 根字体 */
            /* font-size: 20px; */
        }
        div{
            font-size: 1rem;
        }
    </style>

</head>
<body>
    <div>123</div>
</body>
</html>

页面自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var redirect = () => {
            // 获取设备信息
            let userAgent = navigator.userAgent.toLocaleLowerCase()
            // 正则表达式，判断设备类型
            console.log(userAgent)
            let device = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/
            if(device.test(userAgent)){
                // 跳转到移动页面端
                window.location.href = './html/pad.html'
            }else{
                // 跳转pc端页面
                window.location.href = './html/pc.html'
            }
        }
        redirect()
    </script>
</head>
<body>
    
</body>
</html>

响应式布局案例代码

html代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0", user-scalale="0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/small.css" media="(max-device-width:800px)">
    <link rel="stylesheet" href="./css/big.css" media="(min-device-width: 801px)">
</head>
<body>
    <!-- 一套方案使用所有设备 -->
    <div id="layout">
        <div id="top"></div>
        <div id="main">
            <div>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
                <li>分类5</li>
                <li>分类6</li>
            </div>
            <div>
                <li>图片1</li>
                <li>图片2</li>
                <li>图片3</li>
                <li>图片4</li>
                <li>图片5</li>
                <li>图片6</li>
                <li>图片7</li>
                <li>图片8</li>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码部分

big.css

*{
    margin: 0px;
    padding: 0px;
    background-color: #f5f5f5;
}
#layout{
    display: flex;
    flex-direction: column;
    width: 80%;
    /* 居中 */
    margin: 0 auto;
}
#top{
    width: 100%;
    margin: 0 auto;
    background-color: yellow;
    /* 因为是轴向的，所以相当于设定了高度， 与height一样*/
    flex: 0 0 50px;
    /* height: 50px; */
}
#main{
    flex: 0 0 100%; 
    display: flex;
    /* 横向 */
    flex-direction: row;
}
#main div:nth-child(1){
    flex: 0 0 30%;
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
#main div:first-child li{
    flex: 0 0 100%;
    height: 40px;
    list-style: 40px;
    text-align: center;
    border-bottom: 1px solid #dedede;
}

#main div:nth-child(2){
    flex: 0 0 70%;
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    border-right: 1px solid #000;
}
#main div:nth-child(2) li{
    flex: 0 0 15%;
    height: 120px;
    list-style: 40px;
    text-align: center;
    border: 1px solid #000;
    background-color: yellow;
    margin-top: 10px;
}
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布