关闭

@media screen媒体查询

时间: 2019-06-29阅读: 1925标签: 自适应

媒体查询

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


基本使用

具体的使用方式是

  1. <!-- link元素中的css媒体查询 -->
  2. <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
  3. <!-- 样式表中的CSS媒体查询 -->
  4. <style>
  5. @media (max-width: 600px) {
  6. .facet_sidebar {
  7. display: none;
  8. }
  9. }
  10. </style>

媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true.那么媒体查询内的样式将会生效


语法逻辑

主要的逻辑也就是以下四个:

  • and
  • , [也就是 or 的逻辑]
  • not 【对查询结果取反】
  • only 【only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到。】


媒体特点

大多数媒体属性可以带有“min-”或“max-”前缀,用于表达“最低...”或者“最高...”。例如,max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px,大于12450px则不满足条件,不会应用此样式。这避免了使用与html和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。
颜色(color)
颜色索引(color-index)
宽高比(aspect-ratio)
设备宽高比(device-aspect-ratio)
设备高度(device-height)
设备宽度(device-width)
网格(grid)
高度(height)
黑白(monochrome)
方向(orientation)
分辨率(resolution)
扫描(scan)
宽度(width)
-moz-images-in-menus
-moz-mac-graphite-theme
-moz-maemo-classic
-moz-device-pixel-ratio
-moz-os-version
-moz-scrollbar-end-backward
-moz-scrollbar-end-forward
-moz-scrollbar-start-backward
-moz-scrollbar-start-forward
-moz-scrollbar-thumb-proportional
-moz-touch-enabled
-moz-windows-classic
-moz-windows-compositor
-moz-windows-default-theme
-moz-windows-theme


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4408

关闭

让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的

textarea高度自适应的两种方案

textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置,DOM接口实例是 HTMLTextAreaElement, 它具有 setSelectionRange 方法,用来选中输入框中的文本

CSS实现自适应分隔线的N种方法

伪元素+transform:translateX(-100%);主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。

CSS中auto是什么意思?

auto 你可以理解为一种 自动/自适应 的概念,比如现在项目需要一个宽度为960px的整体布局居中,你可使用margin:0 auto;来实现。 无论用户浏览器宽度为多少。

CSS实现自适应正方形、等宽高比矩形

利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult

子级宽度没有自适应内容宽度撑开,只适应到父级100%

子级不设置宽度或者宽度自适应撑开且设置不换行的情况下,子级宽度只会撑开到父级的100%宽度,即上图p标签只会撑开至600px而不是text的撑开宽度

字体大小自适应纯css解决方案

但是该方案存在一个bug,上面的代码,当浏览器窗口变化的时候,box中的文字并没有按照应有的比例变化,但是css3标准中是这么说的:When the height or width of the viewport is changed, they are scaled accordingly.

vuejs中拖动改变元素宽度实现宽度自适应大小

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时

WKWebView加载的网页自适应大小

有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小

Js移动端自适应代码_rem布局

rem 是 css 的长度单位,它是相对于 <html> 元素的 font-size 的相对值。假设 html { font-size: 20px; },那么 1rem 就等于 20px。

点击更多...

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