一文看懂响应式布局

落日映苍穹つ 2023-05-29 13:02 21阅读 0赞

### 响应式布局概念 ###

响应式布局(Responsive design)，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

### 响应式布局一 : Meta 标签 ###

**兼容性:IE9以及以上，其它浏览器没问题**

主要通过设置以下几个值实现响应式  
device-width 设备的宽度,根据当前设备的宽度设置宽度。  
initial-scale 初始缩放  
maximum-scale 最大缩放 即允许的最大缩放程度  
minimum-scale 最小缩放 即允许的最小缩放程度  
user-scalable 用户是否能改变页面缩放程度，如果设置为no，最大与最小缩放将被忽略

### 响应式布局二 : media 媒体查询 ###

**兼容性:IE9以及以上，其它浏览器没问题**

/* 当文档宽度小于980的时候 小于或等于指定的宽度时，样式生效 */
            @media screen and (max-width: 980px) { 
                .div1 {  
                    width:500px;
                 }
                 /* 做一些其它的样式 */
            }
            /* 大于或等于指定宽度时，样式生效。 */
            @media screen and (min-width: 980px) { 
                .div1 {  
                    width:100px;
                 }
            }
            /* 上面是单个，现在试试多个 屏幕在600px~900px之间时*/
            @media screen and (min-width:1000px) and (max-width:1200px){ 
                .div1{ 
                    background:palegreen;
                }
            }
            /* not关键字 样式代码将被使用在除开打印与设备宽度小于980px下所有设备中*/
            @media not print and (max-width: 680px){ 
                 .div3{ 
                    background: chocolate;
                } 
            }

上面这些写在一个文件有些不好维护，那我们可以**改变link标签**，根据屏幕分辨率引入不同的css

在屏幕分辨率小于等于480px的时候，使用css1，当屏幕分辨率大于480px，使用css2，分开会更好维护。

### 响应式布局三 : 百分比布局 ###

根据屏幕大小自动适应，**兼容性强大**

header{ 
                width: 100%;
                /* 百分比即是响应式 */
                height: 40px;
                background: green;
                color: white;
            }
            .div1{ 
                width: 50%;
                height: 200px;
                background: pink;
                color: white;
            }

需要注意的是图片处理

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

img {  width: auto; max-width: 100%; }

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能，根据不同的分辨率使用尺寸不同的图片

**css控制**

@media (min-device-width:600px) { 
        img[data-src-600px] { 
            content: attr(data-src-600px, url);
        }
    }
    
    @media (min-device-width:800px) { 
        img[data-src-800px] { 
            content: attr(data-src-800px, url);
        }
    }

附上百分比做的响应式一个案例

<!DOCTYPE html>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            .main img { 
                width: 100%;
            }
    
            h1 { 
                font-size: 1.625em;
            }
    
            h2 { 
                font-size: 1.375em;
            }
    
            .header { 
                padding: 1.%;
                background-color: #f1f1f1;
                border: 1px solid #e9e9e9;
            }
    
            .menuitem { 
                margin: 4%;
                margin-left: 0;
                margin-top: 0;
                padding: 4%;
                border-bottom: 1px solid #e9e9e9;
                cursor: pointer;
            }
    
            .main { 
                padding: 2%;
            }
    
            .right { 
                padding: 4%;
                background-color: #CDF0F6;
            }
    
            .footer { 
                padding: 1%;
                text-align: center;
                background-color: #f1f1f1;
                border: 1px solid #e9e9e9;
                font-size: 0.625em;
            }
    
            .gridcontainer { 
                width: 100%;
            }
    
            .gridwrapper { 
                overflow: hidden;
            }
    
            .gridbox { 
                margin-bottom: 2%;
                margin-right: 2%;
                float: left;
            }
    
            .gridheader { 
                width: 100%;
            }
    
            .gridmenu { 
                width: 23.5%;
            }
    
            .gridmain { 
                width: 49%;
            }
    
            .gridright { 
                width: 23%;
                margin-right: 0;
            }
    
            .gridfooter { 
                width: 100%;
                margin-bottom: 0;
            }
    
            @media only screen and (max-width: 500px) { 
                .gridmenu { 
                    width: 100%;
                }
    
                .menuitem { 
                    margin: 1%;
                    padding: 1%;
                }
    
                .gridmain { 
                    width: 100%;
                }
    
                .main { 
                    padding: 1%;
                }
    
                .gridright { 
                    width: 100%;
                }
    
                .right { 
                    padding: 1%;
                }
    
                .gridbox { 
                    margin-right: 0;
                    float: left;
                }
            }
        </style>
    </head>
    
    <body>
        <div class="gridcontainer">
            <div class="gridwrapper">
                <div class="gridbox gridheader">
                    <div class="header">
                        <h1>响应式案例</h1>
                    </div>
                </div>
                <div class="gridbox gridmenu">
                    <div class="menuitem">列表一</div>
                    <div class="menuitem">列表二</div>
                    <div class="menuitem">列表三</div>
                    <div class="menuitem">列表四</div>
                </div>
                <div class="gridbox gridmain">
                    <div class="main">
                        <h1>Wilson</h1>
                        <p>我觉得这里最帅的就是博文作者了,我觉得这里最帅的就是博文作者了
                           我觉得这里最帅的就是博文作者了我觉得这里最帅的就是博文作者了
                        </p>
                        <img src="./img/gf.jpg" alt="girlfriend" width="" height="">
    
                    </div>
                </div>
                <d iv class="gridbox gridright">
                    <div class="right">
                        <h2>帅的突破天际</h2>
                        <p>这里是一些文字文字文字66666</p>
                        <h2>博文作者是真的帅</h2>
                        <p>在坐的各位都帅9999999999999</p>
                        <h2>随便放</h2>
                        <p>帅就完事了</p>
                    </div>
                </div>
                <div class="gridbox gridfooter">
                    <div class="footer">
                        <p>今天学到东西了，很开心很开心。今天学到东西了，很开心很开心今天学到东西了，
                            很开心很开心今天学到东西了，很开心很开心</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    </html>

### 响应式布局四 : flex ###

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。  
**兼容性：IE9+**  
从一个面试题说起：如何让一个盒子在body里上下左右居中  
最简单的方式莫过于flex，通常使用margin的方式太low

body{ 
     	/* 重点在这 */
    	display:flex;
    }
    body,html{ 
    	height:100%;
    }
    div{ 
    	height:300px;
    	width:600px;
    	/* 重点在这 */
    	margin:auto;
    }
    //无论你屏幕大小如何调，都会保持居中状态

其它相关属性

/* 换行 wrap-reverse：换行，第一行在下方。nowrap（默认）：不换行。wrap：换行，第一行在上方。*/
               flex-wrap:wrap;
                /*主轴方向 排列方向 。row | row-reverse | column | column-reverse;*/
               flex-direction: row;
    			/* 主轴元素对齐方式 flex-start | flex-end | center | space-between | space-around*/
               justify-content: center;
    
               /* 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
               align-content:flex-start; 
                /* flex-start | flex-end | center | space-between | space-around | stretch */

order为排序先后，数字越小排前面  
flex-grow为比例大小，根据屏幕大小自动分配

<div class="con">
            <div style="order:5;flex-grow:3;background: orangered;">我是div1</div>
            <div style="order:3;flex-grow:3;background: yellow;">我是div3</div>
            <div style="order:2;flex-grow:4;">我是div4</div>
        </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]  
如有错误，欢迎指正  
本篇博客为原创，转载请注明出处

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106113448638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70