响应式布局

最新推荐文章于 2024-06-04 11:45:40 发布
最新推荐文章于 2024-06-04 11:45:40 发布
阅读量186 收藏
点赞数
分类专栏： 前端 文章标签： html css3 flex html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45857926/article/details/108013668
版权

如何响应式布局-初学篇

一. 弹性布局

实现弹性布局的方法

浮动+百分比

//css样式
.box{
    width:100%;
    border: 1px solid #000000;
    padding: 10px;
}
aside{
    width:30%;
    float: left;
    background: red;
    padding: 10px;
}
article{
    width: 65%;
    margin-left: 10px;
    float: left;
    background: yellow;
}

Flex布局

在屏幕和浏览器窗口大小发生改变时,可以灵活的调整布局。
控制元素在页面的布局方向。
按照不同于DOM所指定排序方式对屏幕上的元素重新排序。

//css样式
display: flex;

常用属性：

属性说明
flex伸缩性
flex-direction伸缩流方向
flex-wrap伸缩换行
justify-content主轴对齐
align-items侧轴对齐
1) 伸缩性flex

flex属性的具体数值并不代表具体的宽度值, 而是一个比例值.

.box{
    display: flex;
    border: 1px solid #000000;
    padding: 10px;
}
aside{
	flex: 1;
    background: red;
    padding: 10px;
}
article{
	flex: 1;
    margin-left: 10px;
    background: yellow;
}
2) 伸缩流方向 flex-direction
flex-direction : row | row-reverse | column | column-reverse ;

row : 默认值, 元素从左到右排列
row-reverse: 元素从右到左排列
column :元素从上到下排列
column-reverse: 元素从下到上排列

3) 伸缩换行 flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse ;

nowrap: 默认值, 伸缩容器单行显示, 伸缩项目不会换行
wrap: 伸缩容器多行显示, 伸缩项目会换行
wrap-reverse: 伸缩容器多行显示, 伸缩项目会换行, 且颠倒行顺序

4) 主轴对齐 justify-content

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 (适用于父类容器上)。

justify-content: flex-start | flex-end | center | space-between | space-around ;

flex-start: 默认值。项目位于容器的开头。让子元素从父容器的开头开始排序
在这里插入图片描述
flex-end: 项目位于容器的结尾。让子元素从父容器的后面开始排序
在这里插入图片描述
center: 项目位于容器的中心。让子元素在父容器中间显示
在这里插入图片描述
space-between: 项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子，中间的平均分布空白间距
在这里插入图片描述
space-around: 项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距
在这里插入图片描述

5) 侧轴对齐 align-items

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

align-items: flex-start| flex-end| center| stretch| baseline ;

stretch :如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
在这里插入图片描述

center :弹性盒子元素在该行的侧轴（纵轴）上居中放置。
在这里插入图片描述

flex-start :弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴（纵轴）起始边界。
在这里插入图片描述

flex-end :弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴（纵轴）结束边界。
在这里插入图片描述

baseline :如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
在这里插入图片描述

二. 响应式布局的实现方式及应用

媒体查询

媒体类型

值设备类型
All所有设备
Braille盲人用点字法触觉回馈设备
Embossed盲人打印机
Handheld便携设备
Print打印用纸或打印预览视图
Projection各种投影设备
Screen电脑显示器
Speech语音或音频合成器
Tv电视机类型设备
Tty使用固定密度字母栅格的媒介，比如电传打字机和终端

常用的有 all, screen, print 三种

媒体类型的引入方式

@media方式

@media 媒体类型 {
	选择器{/*样式代码写在这里...*/}
}

link方式

<link href = "style1.css" rel="stylesheet"/>

媒体特性

媒体特性是CSS3对媒体类型的增强版
可以将媒体特性看成 “媒体类型(判断条件) + CSS (符合条件的样式规则) "

@media 媒体类型 and (媒体特征) {CSS样式}
属性值Min/Max描述
device-widthLengthYes设置屏幕的输出宽度
device-heightLengthYes设置屏幕的输出高度
widthLengthYes渲染界面的宽度
heightLengthYes渲染界面的高度
OrientationPortrait/andscapeNo横屏或竖屏
Resolution分辨率(dpildpcm)Yes分辨率
Color整数Yes每种色彩的字节数
color-index整数Yes色彩表中的色彩数

关键词

and :同时满足这两者时生效,到达限定范围

@media screen and ( max-width: 1200px) {样式代码..}

only :指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器

<link href = "style1.css" media =”only screen and (max- width: 500px)"/>

not :排除某种指定的媒体类型,即排除符合表达式的设备

@media not print and ( max- width: 1200px) {样式代码..}

媒体查询的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*大于1024px*/
        @media all and (min-width: 1024px){
            .box{
                width: 1024px;
                padding: 30px;
                margin: 10px auto 0;
                background: red;
            }
            h2{
                font-size: 28px;
            }
            h2 strong{
                font-size: 14px;
                color: silver;
                float: right;
                margin-right: 30px;
            }
            .list{
                margin-top: 30px;
                display: flex;
                justify-content: space-around;
            }
            .list li img{
                width: 90%;
            }
            .list li p{
                font-size: 12px;
            }
        }
        /*640px到1023px*/
        @media all and (min-width: 640px) and (max-width: 1023px){
            .box{
                width: 640px;
                padding: 24px;
                margin: 10px auto 0;
                background: yellow;
                display: flex;
                flex-direction: column;
            }
            h2{
                font-size: 20px;
            }
            h2 strong{
                font-size: 16px;
                color: silver;
                float: right;
                margin-right: 24px;
            }
            .list{
                margin-top: 30px;
                display: flex;
                flex-wrap: wrap;
            }
            .list li img{
                width: 90%;
            }
            .list li p{
                font-size: 14px;
            }
        }
        /*320px到639px*/
        @media all and (min-width: 320px) and (max-width: 639px){
            .box{
                width: 320px;
                padding: 20px;
                margin: 10px auto 0;
                background: blue;
                display: flex;
                flex-direction: column;
            }
            h2{
                font-size: 22px;
            }
            h2 strong{
                font-size: 18px;
                color: silver;
                float: right;
                margin-right: 20px;
            }
            .list{
                margin-top: 30px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
            .list li img{
                width: 100%;
            }
            .list li p{
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <h2>热门活动<strong>更改</strong></h2>
    <ul class="list">
        <li>
            <img src="/pic/1595039824696_hxy.jpg" width="250px">
            <p>推荐活动 | 原创音乐现金榜T榜</p>
        </li>
        <li>
            <img src="/pic/1595039824696_hxy.jpg" width="250px">
            <p>推荐节目 | TAImusic爆笑来袭</p>
        </li>

    </ul>
</div>
</body>
</html>
小 柯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex-wrap容器属性
巧克力很苦的小博客
05-02 1万+
flex-wrap容器属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。 .container{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值。 （1）nowrap（默认）：不换...
flex弹性布局教程-08容器属性flex-wrap
晴空闲云
09-23 1万+
本篇讲解了容器属性 flex-wrap，用于设置容器内项目是否自动换行，并对相应的值进行了演示。 阅读时间大约5~10分钟。
选择正确的单位：百分比、视窗单位和像素单位在网页设计中的应用
最新发布
一个普通人
06-04 449
在网页设计中，选择合适的单位对于创建响应式、灵活和吸引人的布局至关重要。在本文中，我们将探讨三种常用的单位：百分比单位（%）、视窗单位（vw、vh）和像素单位（px），以及它们在网页设计中的应用和区别。
CSS Flex 弹性盒布局详解
weixin_44196299的博客
08-05 1109
弹性盒布局又称“flex”布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。 一、弹性盒布局简介 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display ...
flex布局详解
程序员小明1024
12-20 5998
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
flex布局语法以及实操，一文带你吃透flex布局的基础
心态的博客
09-13 2993
Flex弹性布局已是目前最为流行的布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。以上就是今天要讲的内容，本文仅仅简单介绍了Flex布局的使用，而Flex的功能还不止于此，如果大家还想了解更多的前端知识和flex布局的相关内容，可以到MDN上面去了解更多的知识，学无止尽。
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
响应式布局参考css文件
10-09
响应式布局参考css文件
Flex布局-wrap以相反得方向换行显示效果
L13554358354的博客
09-27 182
flex-wrap：wrap-reverse；
flex布局---flex-wrap属性，决定排列是否换行
weixin_45128912的博客
07-17 3173
flex布局---flex-wrap属性，决定排列是否换行
flex布局中使用flex-wrap实现换行
蔡姐的博客
04-04 2万+
使用flex-wrap进行分行布局
响应式布局的实现方式（5种）
热门推荐
m0_66051368的博客
04-12 3万+
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。 1、百分比布局 百分比是相对于 包含块 的计量单位，通过对属性设置百分比来适应不同的屏幕 包含块： 1. 有父元素相对于父元素 2. 无父元素相对于视口 3. 或者继承于父元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta...
【响应式布局】
小王的博客
09-26 1870
什么是响应式布局、响应式布局的5种实现方案
响应式布局方法总结
weixin_45189747的博客
11-10 1860
定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到...
react 响应式布局
04-03
React响应式布局是一种在React应用中实现自适应和响应式设计的方法。它可以根据不同的屏幕尺寸和设备类型，动态地调整和重新排列组件，以提供更好的用户体验。 在React中，可以使用CSS媒体查询、Flexbox布局和Grid布局等技术来实现响应式布局。以下是一些常用的方法和技术： 1. CSS媒体查询：通过在CSS中使用@media规则，可以根据不同的屏幕尺寸应用不同的样式。例如，可以定义不同的CSS类来适应不同的屏幕宽度，并在组件中根据屏幕尺寸动态地切换类名。 2. Flexbox布局：Flexbox是一种弹性盒子布局模型，可以方便地实现自适应和响应式布局。通过设置容器的flex属性和子元素的flex属性，可以实现灵活的布局和自动调整。 3. Grid布局：Grid布局是一种二维网格布局模型，可以将页面划分为行和列，并通过设置网格项的属性来控制布局。Grid布局提供了更精确和灵活的控制，适用于复杂的响应式布局需求。 4. 响应式组件库：除了手动编写响应式布局代码外，还可以使用现有的响应式组件库，如Ant Design、Material-UI等。这些组件库提供了一系列预定义的响应式组件和布局，可以快速搭建响应式界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值