旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

CSS3中什么是媒体查询【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:90


导读:本文章将为人人分享的是有关CSS3中媒体查询的引见,有肯定的参考价值,愿望对人人的进修有肯定的协助。如今相应式网页设想愈来愈遭到迎接了,然则相应式设想同时也带来了一些本身题...
本文章将为人人分享的是有关CSS3中媒体查询的引见,有肯定的参考价值,愿望对人人的进修有肯定的协助。

如今相应式网页设想愈来愈遭到迎接了,然则相应式设想同时也带来了一些本身题目,比方加载迟缓等题目。然则如今已经有了要领去很好的处置惩罚这个题目了,我们可以运用媒体查询要领去处置惩罚款式顺应差别装备的题目,接下来在文章中将为人人细致的引见。

【引荐课程:CSS3教程

媒体查询

CSS3中的媒体查询,它可以依据用户装备的尺寸差别而挪用差别的款式。它是一种向差别装备供应差别内容的简朴而有用的体式格局,最经常运用的查询是处置惩罚视口高度和宽度的查询。

媒体查询可用于以下内容:

(1)运用CSS @media和at-rules有条件地运用款式。

(2)针对特定媒体的<link>,<source>以及其他的HTML元素。

(3)为了测试和监控媒体状况运用Window.matchMedia()和JavaScript的要领。

媒体范例

all:适用于一切装备。

print:适用于在打印预览形式下在屏幕上检察的分页材料和文档。

screen:重要适用于屏幕。

speech:重要适用于语音合成器。

媒体功用

因为篇幅题目只给人人展现部份媒体查询功用。

称号 形貌
width 可视化宽度
height 可视化高度
aspect-ratio 视口的宽高比宽高比
orientation 视口的方向
resolution 输出装备的像素密度
prefers-reduced-transparency 透明度设置
grid 装备是不是运用网格或位图屏幕
update 输出装备修正内容表面的频次
overflow-block 输出装备怎样处置惩罚沿块轴溢出视口的内容
overflow-inline 可以转动沿着内联轴溢出视口的内容

例:

可以用and关键字将媒体功用与媒体范例或与其他媒体功用相结合,如将款式限制为横向装备,宽度最少为30em长

@media (min-width: 30em) and (orientation: landscape) { ... }


示例:

<style type="text/css">

    @media (max-width: 960px){
    body{
        background: pink;
    }
}
</style>

上面的例子示意当给页面小于960px时页面将会变成粉色

max-width:示意最大宽度,当小于这个宽度时就会挪用下面的函数

效果图

总结:以上就是本篇文章的全部内容了,愿望经由过程本篇文章可以让人人对媒体查询有肯定的相识。

以上就是CSS3中什么是媒体查询的细致内容,更多请关注ki4网别的相干文章!

标签:媒体查询