响应式布局

简介: 弹性布局浮动+百分比布局Flex布局悬浮+百分比布局百分比布局浮动+百分比布局好处网页内容宽度自适应多设备都适用Flex布局1.

弹性布局

浮动+百分比布局

Flex布局

悬浮+百分比布局

img_83a60155fa3104b2b4c34d8a1117c4d9.jpe
百分比布局

浮动+百分比布局好处

网页内容宽度自适应

多设备都适用

Flex布局

1.Flex布局是在CSS3中引入,被叫做弹性盒模型

2.该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间

3.Flex布局功能

在屏幕和浏览器窗口大小发生改变时,可以灵活的调整布局

控制元素在页面的布局方向

按照不同于DOM所指定排序方式对屏幕上的元素重新排序

4.Flex布局的优势

可以让盒子里面的元素排在一行

盒子里面的元素是高度相同

Flex布局语法

语法:

display:flex;

Flex属性

常用属性

属性                              说明

flex                               伸缩性

flex-direction                伸缩流方向

flex-wrap                      伸缩换行

justify-items                   主轴对齐

align-items                    侧轴对齐

伸缩性flex

语法:

flex:1;    伸缩值为1,标识宽度占父级余空间的一份

img_64f9d5a7d05fb0ca71e0b896d9204cb0.jpe
伸缩性flex

部分CSS3属性在浏览器下的兼容方式,需要给元素加前缀

伸缩流方向flex-direction

语法:

img_ca8948d3dd4e75a316e373fb33515f4f.jpe
伸缩流方向flex-direction

row:默认值元素从左到右排列

row-reverse:元素从右到左排序

column:元素从上到下排列

column-reverse:元素从下到上排序

伸缩换行flex-wrap

img_87838a65dbacf2ea8f5752ac769cea5f.jpe
伸缩换行flex-wrap

nowrap:默认值 伸缩容器单行显示,伸缩项不会换行

wrap:伸缩容器多行显示,伸缩项目会换行

wrap-reverse:伸缩容器多行显示,伸缩项目会换行,且颠倒行顺序

主轴对齐justify-content

img_9ff2c4284b87f6708681d01dbf0c7de1.jpe
主轴对齐

flex-start:向一行的起始位置靠奇

filex-end:向一行的结束位置靠奇

center:想一行的中间位置靠奇

space-between:平均分布在行内,第一伸缩项目在一行的最开始最后一个伸缩项目在一行最重点

img_b218248126a662fe6a3662d41b9b70ec.jpe
主轴对齐

侧轴对齐align-items

img_e63eb81770b11d2b7ca2c92b71b0c5a9.jpe
侧轴对齐align-items

flex-start:在侧轴起点的外边距紧靠该行在侧轴起始边

flex-end:在侧轴重点边的外边距紧靠该行在侧轴终点边

center:外边距盒在该行的侧轴上居中放置

stretch:默认值拉伸填充一个伸缩容器

baseline:根据一行文字的基线对齐

img_41b57556e85dcc711105f88c4e208ebf.jpe
侧轴对齐align-items

响应式网页设计

响应式网页设计(RWD,Responsive Web Design)

由伊桑·马克特(Ethan Marcotte)提出

有三种已有的开发技术整合起来,并命名

弹性布局

弹性图片

媒体和媒体查询

img_bcdbe749b6d307d9b38ad3be1bf286cf.jpe
响应式网页设计

媒体类型

在CSS2中常遇到的媒体类型是

All(全部)

Screen(屏幕)

Print(页面打印或打印预览模式)

实际上媒体类型不只这三种,W3C共列出10种媒体类型

img_d9f3be92d5c1d7ef98355c0bc448650a.jpe
10种媒体类型

媒体类型的引入方式

语法:

@media方式

img_d9d9e5a7a5485fb177512c6e5738ac13.jpe
@media方式

link方法

img_aa32d53ec9d8ea30b52b4bb6a5d133ba.jpe
link方法

媒体特性

img_c660cd6ce741881468c6d2e4560572c0.jpe
媒体特性

媒体特性语法

img_11cd5292268a42c71628a807c16c560a.jpe
媒体特性语法

关键字

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

img_f4c026e8c2a85870f4dd2fbfb831a000.jpe
and

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

img_0c7a863e2a1e0be13a6a8798855a30fc.jpe
only

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

img_c5a79e21c44a5735e19e3a7fc9ce00c6.jpe
not

友情链接:https://www.jikedaquan.com/

目录
相关文章
|
8天前
|
编解码 前端开发 iOS开发
响应式布局
响应式布局
|
8天前
|
编解码 前端开发 JavaScript
现代前端开发中的自适应布局与响应式设计
【2月更文挑战第10天】在当今移动设备和不同屏幕尺寸的普及下,前端开发中的自适应布局和响应式设计变得至关重要。本文将探讨现代前端开发中自适应布局的实现原理、响应式设计的优势以及实际应用中的最佳实践。
|
8天前
|
前端开发 JavaScript API
掌握CSS Flexbox,打造完美响应式布局,适配各种设备!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
8天前
|
编解码 前端开发
响应式设计布局要不要了解一下?
响应式设计布局要不要了解一下?
21 0
|
7月前
|
编解码 前端开发 Android开发
前端页面布局之【响应式布局】
前端页面布局之【响应式布局】
42 0
|
9月前
响应式布局的五种方法
响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕。
|
9月前
|
开发框架 移动开发 前端开发
UniApp响应式布局
UniApp 是一款基于 Vue.js 开发的跨平台应用开发框架,可以同时构建 iOS、Android、H5 等多个平台的应用。在 UniApp 中,单位(Unit)是一个非常重要的概念,它决定了应用在不同设备上的布局和样式,要适应不同设备尺寸和屏幕方向的布局是一项艰巨的任务。UniApp 提供了多种方式来实现响应式布局。通过使用 Flex 布局、媒体查询、自适应单位和条件渲染,我们可以根据不同的屏幕尺寸和方向创建出适应性强的布局,从而提供更好的用户体验。
293 1
|
9月前
响应式布局--媒体查询
响应式布局--媒体查询
39 0
|
编解码 前端开发 UED
实现响应式布局
在现代 Web 开发中,响应式布局已经成为了一个非常重要的概念。由于不同设备有不同的屏幕尺寸和分辨率,需要通过响应式布局来适应不同的设备。实现响应式布局的方式有很多种,下面介绍一些常见的方法。
102 0
|
前端开发
【web前端(上)】视口移动端开发样式
【web前端(上)】视口移动端开发样式
79 0
【web前端(上)】视口移动端开发样式

热门文章

最新文章