利用CSS实现轮播图效果和媒体查询技术

文章目录

  • 一,轮播图
    • HTML部分显示
    • CSS部分显示
    • 效果展示
  • 二,媒体查询技术
    • 什么是媒体查询
    • 如何使用
      • 媒体类型
      • 媒体功能
    • 利用媒体查询完成响应式布局
      • 遇到的问题:
      • 解决方法

一,轮播图

HTML部分显示

利用CSS实现轮播图效果和媒体查询技术_第1张图片

CSS部分显示

利用CSS实现轮播图效果和媒体查询技术_第2张图片
利用CSS实现轮播图效果和媒体查询技术_第3张图片
利用CSS实现轮播图效果和媒体查询技术_第4张图片

效果展示

利用CSS实现轮播图效果和媒体查询技术_第5张图片

二,媒体查询技术

什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

使用@media查询,可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询

如何使用

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}

  • not: not 运算符用于否定媒体查询,如果不满足这个条件则返回 true,否则返回 false。
    如果出现在以逗号分隔的查询列表中,它将仅否定应用了该查询的特定查询。 如果使用 not 运算符,则还必须指定媒体类型。

  • only: only 运算符仅在整个查询匹配时才用于应用样式,并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only
    时,旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为
    screen,忽略查询的其余部分,并将其样式应用于所有屏幕。 如果使用 only 运算符,则还必须指定媒体类型。

  • , (逗号) 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此,如果列表中的任何查询为
    true,则整个 media 语句均返回 true。 换句话说,列表的行为类似于逻辑或 or 运算符。

  • and: and
    操作符用于将多个媒体查询规则组合成单条媒体查询,当每个查询规则都为真时则该条媒体查询为真,它还用于将媒体功能与媒体类型结合在一起。

媒体类型

利用CSS实现轮播图效果和媒体查询技术_第6张图片

媒体功能

aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。 device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。 grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。 max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。 max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。 max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。 min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。 min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。 resolution 定义设备的分辨率。如:96dpi,
300dpi, 118dpcm scan 定义电视类设备的扫描工序。 width 定义输出设备中的页面可见区域宽度。

利用媒体查询完成响应式布局

利用CSS实现轮播图效果和媒体查询技术_第7张图片

利用CSS实现轮播图效果和媒体查询技术_第8张图片

遇到的问题:

1.flex布局竖着显示的时候,会把下面的内容遮盖住而不是顶下去
2.div不是百分百显示

解决方法

1.利用CSS实现轮播图效果和媒体查询技术_第9张图片
2.把没使用媒体查询前的div高度和宽度清楚,重新设置

利用CSS实现轮播图效果和媒体查询技术_第10张图片

你可能感兴趣的:(css,媒体,前端)