了解响应式布局--知识点+案例详细讲解

最新推荐文章于 2024-08-28 23:30:23 发布

刺杀曲奇兔

最新推荐文章于 2024-08-28 23:30:23 发布

阅读量869

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_53548177/article/details/122741279

版权

本文详细介绍了响应式布局，包括媒体查询的使用方法、@media的常见参数，以及媒体查询的其他引入方式。通过实例展示了如何利用flex布局实现输入框、长表单、字体大小自动调整等响应式设计，帮助读者掌握响应式布局的关键技巧。

摘要由CSDN通过智能技术生成

我们在页面设计的时候经常要在不同设备下显示,页面设计在不同设备下的显示情况往往不尽如人意,所以我们要将页面在不同设备下都要有比较好的布局,所以要学习响应式布局.

媒体查询

MediaQuery使用方法

中文名称媒体查询
概念:为不同尺寸的屏幕设定不同的CSS样式.
通常在手机端使用较多,因为手机屏幕尺寸多样,为了有更好的体验,要在不同的尺寸下设计不同的css样式.
举个例子看看效果:

运行之后我们打开检查元素,点击手机端界面然后拖动屏幕大小,就可以看到宽度在300前后背景颜色的变化

样式部分如下:

<style>
        #div0{
   
            /* 公共部分 */
            width: 150px;
            height: 200px;
        }
        /* 设定最小与最大屏幕尺寸 */
        @media screen and (min-device-width:100px) 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>

而在页面中只需要设置一个div盒子:

<div id="div0"></div>

如果在这个方案里要设置多组样式的话跟在对应样式后边就可以

@media常用参数

属性名称	作用
width、height	浏览器可视宽度、高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

有时我们需要获取浏览器宽高大小，这时我们只需要将device-width中的device删去即可，拖动浏览器边框，发现颜色随浏览器宽度的变化而变化。

这里我们设置的是700像素作为区分。
我们在进行媒体查询时，通常只会用到宽度的获取，因为宽度是固定的，而高度通常由滚动条调整。

下面我们来演示多个div块在页面宽度不同时的位置：
首先看效果：

我们设置了页面宽度后并没有设置高度，是要由子元素去撑开盒子，设置好三种宽度下子元素的宽度占比后就可以拖动页面宽度查看效果。
代码如下：

<style>
        #div0 {
   
            width: 100%;
            /* 这里没有设置高度，让子元素将父元素撑开即可 */
        }
        #div0 div {
   
            /* 由于div是块级元素，不会在一行显示，所以要设置浮动 */
            float: left;
            height: 150px;
        }
        /*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*/
        #div0 div:nth-child(1) {
   
            background-color: red;
        }
        #div0 div:nth-child(2) {
   
            background-color: blue;
        }
        #div0 div:nth-child(3) {
   
            background-color: green;
        }
        /*一行三个div*/
        @media screen and<