响应式布局

  1. 云栖社区>
  2. 博客>
  3. 正文

响应式布局

program_黑 2018-10-22 21:24:00 浏览450
展开阅读全文

弹性布局

浮动+百分比布局

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/

网友评论

登录后评论
0/500
评论
program_黑
+ 关注