响应式布局设计

于 2021-08-01 22:59:06 发布
阅读量496 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aInsect/article/details/119305301

响应式布局设计

文章目录

1、MediaQuery的使用

1.作用

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

2.示例

@media screen and (min-device-width:200px) and (max-device-width:300px) {
   #div0 {
         background-color: red;
    }         
}

3.常用参数

属性作用
min-device-width根据设备宽度设置约束
min-width根据浏览器宽度设置约束
screen区分是显示还是打印

4.@media 的引用

1.在style中引用

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

2.创建不同style

<style media="(min-device-width:200px) and (max-device-width:300px)"></style>

3.连接css文件时

<link href="" rel="" media="(min-device-width:200px) and (max-device-width:300px)"></link>

2、flex的使用

1.概念

  1. **作用：**FlexiableBox即弹性盒子，用来进行弹性布局，可以配合rem处理尺寸适配问题
  2. 优点：
    • 所有容器都可以使用
    • 更加符合响应式设计的特点

2.初识flex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FBlhlu45-1627829786336)(C:\Users\不吃虫的草丶\AppData\Roaming\Typora\typora-user-images\image-20210728000316755.png)]

  • 主轴（main axis）：元素排列方向为主轴
  • 交叉轴（cross axis）：元素排列方向的垂线为交叉轴
  • x start（ 某轴开始点）----- x end（某轴结束点）
  • main size(元素占主轴的空间)-----cross size (元素占交叉轴的空间)

3.属性

1.flex-direction

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

  • 属性：

    属性作用
    row默认值，从左到右显示
    row-reverse从右到左显示
    column从上到下
    column-reverse从下到上
2.flex-wrap

  • **作用:**子元素在父元素盒子中是否换行

  • 属性：

    属性作用
    nowrap默认不换行（换列），若子元素宽度和大于父元素宽度则压缩子元素宽度
    wrap换行（换列）
    wrap-reverse换行（换列）以相反顺序
3.flex-flow

  • **作用：**flex-direction和flex-wrap的简写

  • 属性：

    flex-flow：<flex-direction>||<flex-wrap>

3、剩余空间

1.justify-content

  • **作用：**用来处理剩余空间的间距

  • 属性：

    属性作用
    flex-start从行开头排列，顺序从左到右
    flex-end从行结尾排列
    center居中显示
    space-between平均分布，两边不留间隔空间
    space-around平均分布，两边留一半间隔空间

4、交叉轴对齐方式

1.align-items

  • **作用：**设置每个flex元素在交叉轴上的对齐方式（处理单行）

  • 属性：

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

2.align-content

  • **作用：**设置每个flex元素在交叉轴上的对齐方式（处理多行）

  • 属性：

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

5、其它属性

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

6、特殊写法

属性写法
flex: autoflex: 1 1 auto
flex: noneflex: 0 0 auto
flex: 0%flex: 1 1 0%
flex: 100pxflex: 1 1 100px
flex: 1flex:1 1 0%

7、rem的使用

1.概念

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

2.与em的区别

  • rem相对于根字体
  • em相对于父字体
  • 父字体涉及级联相对复杂，所以rem应用更为广泛一些

3.rem使用案例

  • 目标

    使用媒体查询+rem或js，实现在不同宽度的视口下自动调整字体大小

  • 实现方法

    1. 获取设备宽度
    2. 计算字体
    3. 设置字体
    4. 初始化

  • 代码实现

    <script>
    var c = () => {
            // 获取设备宽度
            let w = document.documentElement.clientWidth;
            /*
             * 计算字体
             * 20为字体默认大小
             * 320为基准屏幕大小
             * 40为最大显示字体
             */
            console.log(w);
            let n = (20 * (w / 375) > 40 ? 40 + "px" : 20 * (w / 375) + "px");
            console.log(n);
            /* 设置基准字体 */
            document.documentElement.style.fontSize = n;
        }
        // 设置初始化效果
    window.addEventListener("load", c);
    // 设置屏幕变化后效果
    window.addEventListener("resize", c)
</script>

8、自适应布局

1.概念

  • **特点：**不同的设备用不同的页面或局部伸缩
  • **思路：**判断设备的类型或者控制局部的变化

2.实现

  • 根据不同设备类型跳转不同页面

    <script type="text/javascript">
        let redirect = () => {
            // 获取设备信息
            let userAgent = navigator.userAgent.toLowerCase();
            // 正则表达式,移动端设备标识
            let device = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/;
            if (device.test(userAgent)) {
                //跳转到移动端页面
                window.location.href = "equipment/move.html";
            } else {
                //跳转到pc页面
                window.location.href = "equipment/pc.html";
            }
        }
        //调用检测函数
        redirect();
</script>

9、响应式布局

1.概念

  • **特点：**确保一个页面在所有终端上都能显示出令人满意的效果
  • **设计思路：**使用rem或者%为单位

2.设计

  • test_04.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">
    <link href="test_04_css/common.css" rel="stylesheet">
    <link href="test_04_css/big.css" rel="stylesheet" media="(min-width:781px)">
    <link href="test_04_css/small.css" rel="stylesheet" media="(max-width:780px)">
    <title>Document</title>
</head>

<body>
    <div id="layout">
        <div id="top"></div>
        <div id="mian">
            <div>
                <ul>
                    <li>分类1</li>
                    <li>分类2</li>
                    <li>分类3</li>
                    <li>分类4</li>
                    <li>分类5</li>
                    <li>分类6</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>图片1</li>
                    <li>图片2</li>
                    <li>图片3</li>
                    <li>图片4</li>
                    <li>图片5</li>
                    <li>图片6</li>
                    <li>图片7</li>
                    <li>图片8</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

  • common.css

    * {
    margin: 0px;
    padding: 0px;
    background-color: #dedede;
}

ul {
    list-style-type: none;
}

#layout {
    width: 80%;
    height: 400px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

#layout #top {
    width: 100%;
    height: 15%;
    background-color: yellow;
}

  • big.css

    #layout #mian {
    width: 100%;
    height: 83%;
    display: flex;
    justify-content: space-around;
    margin: auto 0;
}

#layout #mian div:nth-child(1) {
    width: 10%;
}

#layout #mian div:nth-child(1) ul {
    width: 100%;
    height: 100%;
    background-color: #dedede;
    display: flex;
    flex-direction: column;
}

#layout #mian div:nth-child(1) ul li {
    height: 16.6%;
    width: 100%;
    border: 1px solid #fff;
    line-height: 150%;
    text-align: center;
    z-index: 10;
}

#layout #mian div:nth-child(2) {
    width: 90%;
}

#layout #mian div:nth-child(2) ul {
    width: 98%;
    height: 100%;
    margin: 0 auto;
    background-color: #dedede;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
}

#layout #mian div:nth-child(2) ul li {
    width: 24%;
    height: 48%;
    background-color: yellow;
}

  • small.css

    #layout #mian {
    width: 100%;
    height: 83%;
    display: flex;
    flex-flow: column wrap;
}

#layout #mian div:nth-child(1) {
    width: 100%;
    height: 30%;
}

#layout #mian div:nth-child(1) ul {
    width: 100%;
    height: 100%;
    margin: auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
}

#layout #mian div:nth-child(1) ul li {
    height: 40%;
    width: 30%;
    border: 1px solid #fff;
    line-height: 150%;
    text-align: center;
    z-index: 10;
}

#layout #mian div:nth-child(2) {
    width: 100%;
    height: 70%;
}

#layout #mian div:nth-child(2) ul {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #dedede;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
}

#layout #mian div:nth-child(2) ul li {
    width: 49%;
    height: 24%;
    background-color: yellow;
}

10、rem弹性布局

1.概念

  • **特点：**根据屏幕宽度做等比例换算，保证屏幕不失真
  • **设计思路：**用%或rem做单位
暮晨丶
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值