响应式布局以及几个小案例

川长思鸟来 2023-01-21 13:27 140阅读 0赞

## 1、什么是媒体查询？ ##

概念：为不同尺寸的屏幕设定不同的CSS样式

> 用法：@media screen and (min-device-width:100px) and (max-device-width:300px)\{\} 意为设备屏幕宽度100px到300px之间的使用

@media的常用参数

*  width、height 浏览器宽度和高度
 *  device-width 设备屏幕的宽度
 *  device-height 设备屏幕的高度

## 2、flex弹性布局 ##

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

> 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

## 容器的属性以及作用 ##

*  flex-direction  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center]
 *  flex-wrap  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 1]
 *  flex-flow  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 2]
 *  justify-content  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 3]
 *  align-items  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 4]
 *  align-content  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 5]
 *  flex的其他属性  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 6]
 *  flex的特殊写法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 7]

## 3.1 案例一 ##

效果图：  
![在这里插入图片描述][20210516170828198.png_pic_center]

<!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> * { margin: 0; padding: 0; } .box { width: 250px; display: flex; border: 1px solid #dcdcdc; } .box label { flex: 1; background-color: #f5f5f5; font-family: "宋体"; text-align: center; } .box label:nth-child(3) { flex: 0 0 30px; } .box input { border: none; outline: none; } </style>
    </head>
    
    <body>
        <div class="box">
            <label for="">姓名</label>
            <input type="text">
            <label for="">GO</label>
        </div>
    </body>
    
    </html>

## 3.2 案例二 ##

效果图：

<!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> .form div { display: flex; /* height: 30px; */ align-items: flex-start; flex: 0 0 30px; } .form div label { flex: 0 0 140px; text-align: right; } .form { display: flex; flex-direction: column; } </style>
    </head>
    
    <body>
        <form>
            <div class="form">
                <div>
                    <label for="">姓名：</label>
                    <input type="text">
                </div>
                <div>
                    <label for="">请输入密码：</label>
                    <input type="password">
                </div>
                <div>
                    <label for="">请再次输入密码：</label>
                    <input type="password">
                </div>
            </div>
        </form>
    </body>
    
    </html>

## 3.3 案例三 ##

*  rem的应用
 *  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>
        <style> html { font-size: 10px; } div { /* rem: 相对于根元素的字体大小的单位 */ font-size: 1rem; } </style>
    </head>
    
    <body>
        <div>改变设备宽度，看我大小</div>
    
        <script> var n = () => { let w = document.documentElement.clientWidth; let c = (20 * (w / 320)) > 40 ? 40 + 'px' : (20 * (w / 320)) + 'px' document.documentElement.style.fontSize = c; } window.addEventListener('load', n); window.addEventListener('resize', n); </script>
    </body>
    
    </html>

## 3.4 案例四 ##

## 3.5 案例五 ##

## 3.6 案例六 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221020/181e95644263416b8f221fd904492c94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221020/8a1112cb4c1a4d269cb37d7cd00a6276.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221020/4d79d7e2d2894d0cb2c49de9203e1c74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221020/5ce0369b55dc41f3ac90cdd763f3190b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221020/3bc1ce0d59254ab69f01e9cb150d45c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221020/0670967d3ab4454da4c1b5e038f03100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221020/4c96d7c5016049379912b36b6aadd320.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221020/057a344f108949abab6b38e9a50e74f6.png
[20210516170828198.png_pic_center]: /images/20221020/73b33178739e457fbd5cb3e3d59a1c2e.png