Css媒体查询以及常用设置

更新日期: 2019-09-09阅读: 2.2k标签: 媒体查询

前言

页面为了适应各种设备(PC端、移动端的不同设备)的不同显示情况,增加了媒体查询的功能,通过特定的要求达到不同的样式显示。


媒体查询

@media 媒体类型 and|not|only (媒体特性){
  /*css样式*/
}

或者

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">


媒体类型

all

screen

print


媒体特性

媒体查询通常用来区别于屏幕宽度大小——实际上区别不同设备的尺寸。而通常需要用到媒体查询的时候(即适配移动端),会通过一些适配方案(viewport、rem等)来确定尺寸比例。


常用媒体查询方案

@media screen and (min-width:1200px){ ... }/* 大型设备(大台式电脑,1200px 起) */

@media screen and (min-width:992px){ ... }/* 中型设备(台式电脑,992px 起) */

@media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,768px 起) */

@media screen and (min-width:480px){ ... }/* 超小设备(手机,小于 768px) */

链接: https://www.fly63.com/article/detial/5831

CSS3及JS媒体查询教程

CSS3及JS媒体查询教程:关键词“not”取补集,“only”不再推荐使用(not,only都是可选的),“,”用法同CSS选择器中的逗号用法,表示一种合写。媒体查询大部分都接受前缀min或max,表示大于等于或小于等于。(切记min和max对应的顺序,不要被表象所误导)

CSS3 @media媒体查询

@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是个不错的选择

前端css3媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)

css媒体查询与响应式

根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式

@media screen媒体查询

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。

超越媒体查询:使用更新的HTML和CSS功能进行响应式设计

除了使用媒体查询和现代CSS布局(如flexbox和grid)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!