web前端之响应式布局的几种方式

最新推荐文章于 2024-09-06 17:59:26 发布
最新推荐文章于 2024-09-06 17:59:26 发布
阅读量2.8k 收藏 61
点赞数 54
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67444449/article/details/138400969
版权

响应式布局的几种方式

一、百分比布局

百分比布局参考的是父级的百分比

	注：父级必须要有明确高度，才可以设置高度百分比（如果没	有高度是不显示的）

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style>
	.box{width:80%;height:200px;background-color:red}
	.part{width:80%;height:80%;background-color:blue}

 </style>
    
</head>
<body>
	<div class="box">
		<div class="part"></div>
	</div	>
</body>
</html>

![(https://img-blog.csdnimg.cn/direct/c6fb36d21e394c1b95ea6d6217ae1121.png)

二、Rem和em布局

	只要是px单位的元素都可以用rem表示
  • em相对当前文字大小
  • rem相对于根元素的文字大小（默认html元素）

10rem相当于10*根元素大小

	好处：可以通过根元素HTML元素文字大小统一修改所有rem数值的百分比

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style>
    html{font-size:20px}
	.box{width:20rem;height:10rem;background-color:red} /* 相当于宽400px，高200px */

 </style>
    
</head>
<body>
	<div class="box"></div>
</body>
</html>

在这里插入图片描述

三、@media screen布局 （css3）

 以上两种只能改变比例大小，却不能改变布局排列方式；而排列布局需要用到@media screen
 当屏幕尺寸改变到特定大小时，改变对应的样式，可以写多个样式

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style>
  
	@media screen and (min-width:600px){   /* 当窗口尺寸大于600px时，触发对应的样式 */
		.box{width:200px;height:200px;background-color:red;margin-left:150px}
		}
	@media screen and (max-width:600px){   /* 当窗口尺寸小于600px时，触发对应的样式 */
		.box{width:100px;height:100px;background-color:blue;margin-left:100px}
		}

 </style>
    
</head>
<body>
	<div class="box"></div>
</body>
</html>

屏幕窗口宽度小于600px时，改变样式
在这里插入图片描述
屏幕窗口宽度大于600px时，改变样式
在这里插入图片描述
也可以结合rem更加便捷的改变样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style>
  
	.box{width:10rem;height:10rem;background-color:red}
	@media screen and (min-width:600px){ /* 当窗口尺寸大于600px时，改变根元素的字体大小为20px */
		Html{font-size:20px}
		}
	@media screen and (max-width:600px){  /* 当窗口尺寸小于600px时，改变根元素的字体大小为10px */
		Html{font-size:10px}
		}
 </style>
    
</head>
<body>
	<div class="box"></div>
</body>
</html>

四、vw和vh布局

	vh高度百分比可以用100hv表示

类似百分比，
vw和vh参考浏览器窗口大小,vw代表窗口横向宽度；vh代表窗口纵向高度；
vw只是一个单位，都可以用于表示宽度或高度的单位，如width：50vh 相当于宽度为屏幕高度的50%
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style>
  
	.box{width:200px;height:200px;background-color:red}
	.part{width:50vw;height:50vh;background-color:blue}
</style>
    
</head>
<body>
	<div class="box">
		<div class="part"></div>
	</div>
</body>
</html>

蓝色方块始终占屏幕窗口的50%
在这里插入图片描述

五、Flex布局

1、什么是flex布局

	Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局

.box{
  dispaly: flex;
}

行内元素也可以使用flex布局

.box{
  display: inline-flex;
}

Webkit内核的浏览器，需要加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

2、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3、容器的属性

容器的6个属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

（1）flex- direction属性

flex- direction属性决定主轴的方向（即项目的排列方向）

.box{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction属性有4个值

  • row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
  • row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
  • column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
  • column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。
    在这里插入图片描述

（2）flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap属性有3个值

  • nowrap（默认）：不换行（列）。
  • wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
  • wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。
    在这里插入图片描述

（3）flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box{
  flex-flow: <flex-direction> <flex-wrap>;
}

（4）justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.box {
   display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

justify-content属性有五个值

  • flex-start（默认）：与主轴的起点对齐。
  • flex-end：与主轴的终点对齐
  • center：与主轴的中点对齐。
  • space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
    在这里插入图片描述

（5）align-items属性

align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下，横向交叉轴始终自左而右。

.box {
  display: flex;
      align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items属性有5个值

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，项目将占满整个容器的高度。

在这里插入图片描述

（6）align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
display: flex;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content属性有6个值

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：主轴线占满整个交叉轴。

4、项目的属性

设置在项目上的6个属性。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

（1）order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
order: <integer>;
}

在这里插入图片描述

（2）flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

剩余空间分4份 黄色占3份，紫色1份

	剩余空间分4份 黄色占3份，紫色1份

（3）flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩

.item {
  flex-shrink: <number>; /* default 1 */
}

（4）flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

当设置了flex-basis的值并且flex-shrink: 0； width的设置就不起作用了

（5）flex属性

flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为 0 1 auto后两个属性可选

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值： auto( 1 1 auto)和none( 0 0 auto)

（6）align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式。可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于strech

.item {

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

	align-self属性有6个值，除了auto，其他都与align-items属性完全一致。
闲人陈二狗
关注
前端响应式布局原理与方案（详细版）
weixin_34273479的博客
04-08 8544
引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。 响应式设计与自适应设计的区别：响应式开发一套...
web开发之响应式布局
weixin_46513544的博客
08-26 973
响应式开发 bootstrap前端开发框架 bootstrap栅格化系统 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录响应式开发bootstrap前端开发框架bootstrap栅格化系统前言一、响应式开发响应式开发原理二、Bootstrap前端开发框架12.布局容器2.列嵌套列偏移列排序 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、响应式开发 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数
[响应式布局]响应式布局技巧
图解AI
10-09 6751
一理解几种布局的概念1、静态布局（Static Layout） 即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置； 对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。 2、自适应布局（Adaptive Layout） 自适应布局（Ada
CSS实现前端响应式布局
最新发布
m0_54829066的博客
09-06 1183
总之，CSS 实现前端响应式布局是一项非常重要的技术，它可以提高网页的可访问性、可用性和用户体验。通过掌握 CSS 的基础知识、媒体查询、响应式图像和媒体、响应式导航菜单、响应式网格系统等技术，可以实现高效、灵活和自适应的响应式布局。同时，需要注意响应式布局的测试与调试、性能优化和未来发展趋势，不断提高响应式布局的设计和开发水平。是媒体特性的值，如具体的像素值、百分比等。响应式布局的挑战与解决方案。响应式布局的定义与重要性。响应式设计的进一步发展。响应式布局的设计原则。响应式布局的性能优化。
14款响应式前端开发框架
Java Dynamic的专栏
07-25 3781
摘要：使用前端开发框架可以大大简化开发过程，所开发网站具有跨浏览器、一致性、响应式等特点。本文收集了14款响应式前端开发框架，且分别指出所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。 前端开发并不是一个容易的工作，不仅需要掌握HTML、CSS和JavaScript，针对不同的浏览器版本和平台，还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行，
响应式布局实现的几种方法 — 弹性布局
weixin_30273931的博客
06-19 614
　　响应式布局的实现是前端工程中一个非常大的跨越，它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力。就今天这个机会，我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局。 　　弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是K最多用到的一种实现响应式的方法。尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面，利用弹性布局是都...
前端实现响应式布局的几种方法
热门推荐
DDDHL_的博客
03-19 1万+
分享一下常用的响应式布局方法，flex布局、百分比布局、rem布局、媒体查询、自适应布局
响应式布局方法总结
weixin_45189747的博客
11-10 1917
定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到...
前端响应式布局
qq_43658148的博客
07-14 1114
一、媒体查询一、媒体查询1.基本语法目标：能够根据设备宽度的变化，设置差异化样式开发常用语法媒体特性常用语法：max-widthmin-width1）媒体查询实现的效果就是当网页大大小不同的时候，显示不同的布局样式。
前端-响应式布局
KrisChung博客
09-15 1646
响应式基本语法 响应式外部样式 响应式基本语法 响应式布局的优缺点 优点:面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题 缺点：兼容各种设备时所需工作量大丶效率低下丶代码累赘，会隐藏无用的元素，加载时间延长， 其实这是一种折中性质的设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上 改变了网站原有的布局结构，会...
前端的响应式布局
weixin_45012866的博客
11-09 1993
一、什么是视口 视口（viewport）就是浏览器显示在页面上的内容的屏幕区域。可以分为布局视口、视觉视口和理想视口。 其中布局视口只为所有的移动设备设置了一个固定的布局视口，视觉视口可以进行缩放，但是最推荐的是由乔布斯提出来的理想视口。是对不同的设备来讲，是最理想的视口尺寸，即设备有多宽，理想的视口就是多宽。 标准的meta视口标签写法 <!--即把视口的宽度设置为设备的宽度 width=device-width 视口就是为了移动端而生的--> <meta name="viewport
web前端开发之几种布局方式之响应式布局
zzyaiaad的博客
05-07 999
一理解几种布局的概念 1、静态布局（Static Layout） 即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；  意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；  对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。 2、弹性布局 弹性布局是CSS3引入...
响应式布局的五种方法
zhaojiaxing123的博客
04-11 2144
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。
【前端】深入浅出响应式布局
九日的博客
05-17 1362
通过理解响应式布局的基本思想和关键技术，开发者可以创建灵活、适应性强的网站。在实际应用中，可以根据具体需求选择合适的布局方法和技术，例如使用流式布局、Flexbox、Grid以及媒体查询等。为了提高开发效率，选用合适的框架如Bootstrap也是一个不错的选择。掌握这些技术，即使是复杂的网页布局，也能简单、高效地实现响应式设计。希望这篇文章对你有所帮助，如果有任何问题或建议，欢迎留言讨论！通过以上介绍，你已经掌握了响应式布局的核心概念和实现方法。现在就开始动手实践，有问题随时欢迎讨论！
响应式布局方法的方法
马优晨
03-07 757
响应式布局方法 百分比布局 bootstrap栅格系统（antdesign 里面的珊格布局） Flex 伸缩盒布局 媒体查询
【响应式布局的方式有哪些】
weixin_52369825的博客
07-21 651
（4）、图片的响应式处理：使用css的max-width：100%和height：auto 的等属性来确保图片能够根据容器的大小来调整，避免在小屏幕上出现溢出或失真的问题，同时也可以使用HTML的<picture>元素和srcset属性来根据不同屏幕尺寸加载适合图片资源，提高网页的加载性和显示质量。（5）、字体的响应式处理：采用相对单位（如rem、em）来设置字体的大小，使得字体能够根据屏幕的尺寸进行自适应调整，可以使得媒体查询来定义不同屏幕尺寸下的字体大小，以提供更好的可读性和用户体验。
实现响应式布局有几种方法
青春木鱼的博客
11-29 5193
响应式布局有的方法有：1、媒体查询；2、百分比【%】；3、vw或vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度；4、rem单位是相对于字体大小的html元素；5、flex弹性布局。
web前端开发实习生笔试题
10-30
作为一名web前端开发实习生，我觉得笔试题可能会包括以下几个方面的内容。 首先，HTML和CSS是web前端开发的基础，所以笔试题可能会涉及到HTML标签的使用和CSS样式的设置。例如，要求编写一个简单的网页，包含头部、导航栏、内容区域和页脚，并添加一些基本的样式，如背景颜色、字体样式等。 其次，JavaScript是web前端开发中不可或缺的一部分，所以笔试题可能会要求使用JavaScript编写一些交互功能。例如，对网页中的按钮进行点击事件的绑定，实现一些简单的DOM操作，如隐藏和显示元素、修改元素的内容或样式等。 另外，响应式设计也是web前端开发的重要内容之一，所以笔试题可能会涉及到移动端适配和响应式布局。例如，要求使用媒体查询实现移动端和PC端的界面布局差异，并确保在不同屏幕尺寸下网页的正常显示。 最后，考察对前端开发工具的熟练程度也是一种常见做法。例如，要求使用版本控制工具如Git进行代码管理，或者使用代码编辑器如VS Code进行开发。 总结来说，web前端开发实习生的笔试题主要涵盖HTML和CSS基础、JavaScript交互功能、响应式设计以及前端开发工具的应用。掌握了这些基本知识和技能，将能够胜任前端开发实习生的职位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值