响应式布局（前端）+学习笔记

什么是响应式布局？

响应式布局是同一页面在不同的屏幕上有不同的布局，可以通过代码使页面适应不同的屏幕。

举例：

手机端和电脑端，在手机端每个设备的宽度不一致，早期解决方案：做两个页面；解决思路：响应式布局；

手机的屏幕大小例如360*740；、

电脑的屏幕大小 1920*1080；

实现的方法：

一、灵活网格

使用浮动布局，每个元素的宽度用百分比，布局的元素宽度和不超过100%；

使用相对的单位 em rem

em 相对于当前对象的文本的字体尺寸

text-indent：2em

rem 相对于html根元素的字体尺寸（css3新增）

在根元素html定义字体尺寸，计算出页面相对的宽度

对于不同的宽度的屏幕，改变根元素字体尺寸，页面大小会自动得出结果

实例代码：

.focubtn span{
            box-sizing: border-box;
            border-radius: 50%;
            height: 0.5rem;
            width: 0.5rem;
            background: rgba(255, 253, 253, 0.6);
            margin: 0 2px;
            display: inline-block;
            opacity: 1;
        }

二、响应式设计

使用 max-width和 min-width

例如：图片给 max-width:100% 图片可以按百分比等比缩小，但是最大不会超过100%

页面给min-width 页面缩小到一定程度的时候出现滚动条保证页面结构

三、媒体查询

通过媒体查询，根据设备参数的值来调整网站或者应用；

CSS语法：

@media 媒体类型条件 (媒体特征)

条件 and 和

not 不

only 只

媒体类型：

all 全部

print 打印机

screen 屏幕

媒体特征

max-width max-height 最大宽度、高度指页面要小于指定宽高应用效果

min-width min-height 最小宽高指页面要大于指定宽高

实例：

@media  (max-width:768px) {
            .mediaElement{
                background-color: #FAA;
            }
            .mediaElement::before{
                content: "你使用的是手机或者超小的屏幕";
                display: block;
                font-size: 4.44vw;
            }
        }

扩展：

移动端单位

vw view width

把视口的宽度设为100vw 1vw是视口宽度的百分之一

例如字体大小想设置在标准状态（设备宽360px）为16px

在标准状态下 1vw = 3.6px

字体大小 16 / 3.6 = 4.44vw

vh view height

vmin vw 和vh 之间的最小值 vmax vw和vh之间的最大值

通过案例来总结：

<!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>
        .mediaElement{
            width: 100%;
            height: 200px;
            background-color: #AAF;
        }

        @media  (max-width:768px) {
            .mediaElement{
                background-color: #FAA;
            }
            .mediaElement::before{
                content: "你使用的是手机或者超小的屏幕";
                display: block;
                font-size: 4.44vw;
            }
        }

        @media  (min-width:768px) and (max-width:1400px) {
            .mediaElement{
                background-color: #AFA;
            }
            .mediaElement::before{
                content: "你使用的是中等的屏幕";
                display: block;
                font-size: 4.44vw;
            }
        }

        @media  (min-width:1400px) {
            .mediaElement{
                background-color: #FFA;
            }
            .mediaElement::before{
                content: "你使用的是大的屏幕";
                display: block;
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <!-- 历史上的布局 -->
    <!-- <section class="" style="width: 800px;margin: 0 auto;">
        <div class="" style="float: left; width: 290px;background-color: wheat;">
            <h2>标题</h2>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            <span></span>
        </div>
        <div style="float: right;width: 500px;background-color: wheat;">
            <h2>标题</h2>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            <span></span>
        </div>
    </section> -->
    
    <section class="media">
        <div class="mediaElement"></div>
    </section>
    
</body>
</html>

响应式布局（前端）+学习笔记

什么是响应式布局？

一、灵活网格

二、响应式设计

三、媒体查询

猜你喜欢