CSS3新特性 (分栏) (媒体查询) (自适应 响应式布局)

阅读 55

2022-03-22

CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例:

CSS3 多列属性

下表列出了所有 CSS3 的多列属性:

属性描述

column-count

指定元素应该被分割的列数。
指定如何填充列
column-gap指定列与列之间的间隙
column-rule所有 column-rule-* 属性的简写
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columnscolumn-width 与 column-count 的简写属性。

CSS3 多媒体类型 

描述
all用于所有多媒体类型设备
print用于打印机
screen用于电脑屏幕,平板,智能手机等。
speech用于屏幕阅读器

        使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

        以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:

@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}

单位(px em rem)
1、px

2、em

3、rem

自适应布局和响应式布局


1、自适应布局

2、响应式布局 

精彩评论(0)

0 0 举报