提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > CSS3中什么是媒体查询【html5教程】,媒体查询

本文章将为人人分享的是有关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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS3中什么是媒体查询【html5教程】,媒体查询"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线