响应式布局

sfumato

已于 2023-03-12 12:11:30 修改

阅读量689

点赞数 3

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

于 2023-03-08 20:39:52 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/sfumato/article/details/129370130

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、媒体查询

概念：为不同尺寸的屏幕设定不同的css样式，先看例子

在这里插入图片描述

这里的min-device-width表示设备最小宽度，同理，max-device-width表示设备最大宽度。设备宽度在这个范围内，选择媒体查询中的样式

在设备宽度200-300px时

在这里插入图片描述

301-500px时

在这里插入图片描述

没有设置的宽度范围显示为空

1.1@media常用参数

在这里插入图片描述

没有写device，为浏览器宽度

在这里插入图片描述

浏览器宽度在500-700px内

在这里插入图片描述

浏览器宽度大于700px时

在这里插入图片描述

1.2小demo

给定三个不同颜色的盒子，最开始他们在一行。随着设备的宽度缩小，第一行只有两个盒子，第二行一个盒子。最后所有盒子都在一列上。

body

在这里插入图片描述

css样式

在这里插入图片描述

后面就不展示了，设置最小最大宽度就行，以下是页面图，对应最大到最小

在这里插入图片描述

1.3媒体查询其他引入样式-1

就是写多个内部样式表，公共的放一块，媒体查询单独写。下面拿小demo的例子

公共部分

在这里插入图片描述

非公共部分

在这里插入图片描述

1.4媒体查询其他引入方式-2

就是用link标签外部引入样式，思想和上面一样

css-1.css存公共样式，css-2.css存401-500px对应的样式，同理css-3.css

在这里插入图片描述

引入外部样式

在这里插入图片描述

二、flex弹性布局

概念：flex即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸适配问题

2.1为什么用flex

用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局
更加符合响应式设计的特点

2.2初识flex

在这里插入图片描述

flex盒子有主轴和交叉轴。并不是横向就为主轴，纵向为交叉轴，而是根据里面的盒子按哪个方向排列确定主轴交叉轴的方向。如果是按纵向排列，则纵向为主轴。同理，主轴开始和结束位置也与主轴方向相关，不过位置都是在边缘位置。main-size是子元素占主轴的大小，同理交叉轴。

2.3 主轴方向与换行

2.3.1flex-direction

可以理解为改变主轴方向

在这里插入图片描述

未设置flex

在这里插入图片描述

页面展示

在这里插入图片描述

为父元素设置flex

在这里插入图片描述

页面展示

在这里插入图片描述

由此可见，默认主轴为横轴，即默认为flex-direction: row;

为父元素设置属性flex-direction: row-reverse;

在这里插入图片描述

为父元素设置属性flex-direction: column;

在这里插入图片描述

为父元素设置属性flex-direction: column-reverse;

在这里插入图片描述

若子元素的总宽度大于父元素宽度会如何？

在这里插入图片描述

原来四个100px宽度的盒子被压缩成四个相等宽度为75px的盒子

在这里插入图片描述

2.3.2flex-wrap

flex盒子默认为无换行的

设置flex-wrap:wrap;

在这里插入图片描述

页面

在这里插入图片描述

设置flex-wrap:wrap-reverse;

在这里插入图片描述

2.3.3flex-flow

将上面两个属性合并简写

在这里插入图片描述

主轴为row，换行显示

在这里插入图片描述

页面

在这里插入图片描述

2.4剩余空间调整为间距

2.4.1justify-content

在主轴方向上调整

在这里插入图片描述

flex-start为默认值

在这里插入图片描述

flex-end

在这里插入图片描述

space-between

在这里插入图片描述

space-around

在这里插入图片描述

2.4.2align-items

在交叉轴方向调整

在这里插入图片描述

设置align-items:center

在这里插入图片描述

页面

在这里插入图片描述
如果高度大于里面子元素总高度，flex-wrap换行会有空行，如上图的四，去除空行用align-items:flex-start即可

2.4.3align-content

与align-items的区别是 align-content是针对总体子元素，align-items是针对每一行子元素

在这里插入图片描述

设置align-contentcenter;

在这里插入图片描述

页面

在这里插入图片描述

2.5给子元素设置伸缩比例flex属性

在这里插入图片描述

2.5.1flex-basis

flex-basis设置子元素宽度，将会覆盖原width属性，下面是不设置flex-basis

在这里插入图片描述

页面

在这里插入图片描述

设置flex-basis

在这里插入图片描述

页面

在这里插入图片描述

2.5.2flex-grow

针对主轴填充空余部分，值为整数

这里设置第一个子元素的flex-grow为1，第二各子元素的为4
空余部分像素为400-50×2 = 300
总共份数为5，一份占300/5 = 60px
所以第一个元素宽度为（主轴为row）:50+1×60 = 110px
第二个元素宽度为（主轴为row）:50+4×60 = 290px

在这里插入图片描述

页面

在这里插入图片描述

2.5.3flex-shrink

与flex-grow类似，算超出部分每个子元素占的权重

将子元素宽度放大，未显示子元素的超出部分，原因是他默认缩小子元素比例了，我们将flex-shrink都设置为0后，可以看到超出部分

在这里插入图片描述

未设置0

在这里插入图片描述

设置0

在这里插入图片描述

我们同样将缩放比例变成1：4
计算超出部分400-300×2 = -200
每一份占权重 200/5 = 40
子元素1宽度 300 - 40 = 260px
子元素2宽度 300 - 40×4 = 140px

在这里插入图片描述

页面

在这里插入图片描述

2.5.4flex

flex属性即简写上面三个属性

在这里插入图片描述

2.5.5给子元素设置伸缩的特殊写法

这里的auto会覆盖给子元素设置的width

在这里插入图片描述

三、课堂案例

3.1输入框布局

给定固定长度的盒子，设计成下面的形式

body

在这里插入图片描述

css

在这里插入图片描述

效果图

在这里插入图片描述

如果想让按钮小一点，单独设置他的flex属性，这里是flex: 0 0 25px，表示Go标签不参与伸缩，而是保持25px，所以姓名标签缩放比例占100%

在这里插入图片描述

效果图

在这里插入图片描述

3.2长表单布局

在这里插入图片描述

body

在这里插入图片描述

页面

在这里插入图片描述

冒号对齐

在这里插入图片描述

调整间距，设置每行div高度

在这里插入图片描述

发现input也跟着拉伸了，原因是align-items默认属性为stretch，这也是弹性盒子的一个特性

在这里插入图片描述

调整：将align-items设置为flex-start

在这里插入图片描述

发现input回归正常

在这里插入图片描述

用flex实现

在这里插入图片描述

3.3rem的使用方法

在这里插入图片描述

body

在这里插入图片描述

css。1rem等于根元素字体大小，可以更改，这里是16px

在这里插入图片描述

3.4rem与em的区别

rem是针对根元素字体大小，em是针对父级的字体大小

3.5rem课堂案例

在这里插入图片描述

改变设备宽度，根字体改变，被设置rem的额元素也改变

3.6自适应布局

在这里插入图片描述

根据不同设备型号分配html。若是同一型号，不同屏幕1宽度，则可以用媒体查询进行局部自适应

在这里插入图片描述

3.7响应式布局

在这里插入图片描述

电脑端

在这里插入图片描述

移动端

在这里插入图片描述

思路：用媒体查询设置不同样式

body

在这里插入图片描述

外部引入样式

在这里插入图片描述

big.css

在这里插入图片描述

small.css

在这里插入图片描述

两个样式有很多重复的，有时间可以提出公共部分

3.8rem弹性布局

在这里插入图片描述
日后完善。。。。。。

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

响应式布局
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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