CSS媒体查询的应用

栏目: CSS · 发布时间: 7年前

内容简介:CSS媒体查询的应用

在CSS3中添加的媒体查询,允许内容的呈现针对一个特定范围的输出设备而定制,而不必改变内容本身。

Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。

MDN CSS媒体查询

媒体类型

  1. all 所有媒体
  2. braille 盲文触觉设备
  3. embossed 盲文打印机
  4. print 手持设备
  5. projection 打印预览
  6. screen 彩屏设备
  7. speech ‘听觉’类似的媒体类型
  8. tty 不适用像素的设备
  9. tv 电视

媒体类型

@media screen {
 p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
 p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
 p.test {font-weight:bold;}
}

/*移动端样式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 /* Styles */
}

sans - serif 字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读。

媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式.

  • 表达式描述了媒体特征, 最终会被解析为 truefalse .
  • 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是 true , 那么该媒体查询的结果为 true
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style> 
@media (max-width: 600px) {
 .facet_sidebar {
 display: none;
 }
}
</style>

逻辑操作符

可以使用 notandonly 等逻辑操作符构建复杂的媒体查询。

  • and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时,结果才为真。
  • not 操作符用来对一条媒体查询的结果进行取反。
  • only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。

若使用了 notonly 操作符,必须明确指定一个媒体类型。默认为 all 所有媒体类型。

and 用于合并多个媒体属性或合并媒体属性与媒体类型

@media (min-width: 700px) and (orientation: landscape) { ... }
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* 逗号分隔相当于or操作符 */
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not 用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

only 仅在媒体查询匹配成功的情况下应用指定样式

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

语法

@media mediatype and | not | only (media feature) { css-code; }

常用媒体属性

  • 设备宽度:device-width | min-device-width | max-device-width
  • 设备高度:device-height | min-device-height | max-device-height
  • 设备宽度比:device-aspect-ratio: 16/9
  • 设备方向:orientation: portrait / landscape
  • 设备输出分辩率:min-resolution: 300dpi | min-resolution: 2dppx
  • 屏幕像素比:min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio
  • 渲染区域的宽度: width | min-width | max-width
  • 渲染区域的高度: height | min-height | max-height

设备输出分辩率(打印分辩率):dpi, dpcm, dppx

指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示。

每英寸包含点的数量(dots per inch)

普通屏幕通常包含96dpi,一般将2倍于此的屏幕称之为高分屏,即大于等于192dpi的屏幕,比如Mac视网膜屏就达到了192dpi(即2dppx),打印时一般会需要更大的dpi;

1dppx = 96dpi

1dpi ≈ 0.39dpcm

1dpcm ≈ 2.54dpi

分辨率PPI与DPI

Media query只接受单个的逻辑表达式作为其值或者没有值

Media Query其中的大部分接受min/max前缀,用来表示其逻辑关系,表示应用于大于等于或者小于等于某个值的情况著作权归作者

横竖屏的判断

@media (orientation : landscape){ /* 横屏 */ }
@media (orientation : portrait){ /* 竖屏 */ }

注意部分 Android 中有bug

当输入框获得焦点,触发弹出键盘后,横屏的样式出现了,然而他使用的是竖屏,并未把手机横过来。

添加宽度限制,屏幕宽度大于450px时,并且是横屏时,应用横屏样式

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
// CSS Style
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
// CSS Style
}

高清图片适配

在普通屏下使用@1x图片,在高清屏下使用@2x图片

/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
.bg{
 background-image:url(img_1x.png);
}
/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */

@media
 only screenand(-webkit-min-device-pixel-ratio: 1.25),
 only screenand(min-resolution: 120dpi),
 only screenand(min-resolution: 1.25dppx){
ratio:1.5){
 .bg{
 background-image:url(img_2x.png);
 }
 }

屏幕适配

移动端配合 rem 使用,适配不同宽度的屏幕

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

适配独立的样式文件

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

设备判断

@media screen and (device-aspect-ratio: 40/71) {}
或者:
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}

调整模块的样式

@media screen and (max-width: 980px) {

 #pagewrap {
 width: 95%;
 }

 #content {
 width: 60%;
 padding: 3% 4%;
 }

 #sidebar {
 width: 30%;
 }
 #sidebar .widget {
 padding: 8% 7%;
 margin-bottom: 10px;
 }

 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Docker——容器与容器云

Docker——容器与容器云

浙江大学SEL实验室 / 人民邮电出版社 / 2015-9-1 / 89.00元

本书从实践者的角度,在讲解Docker高级实践技巧的同时,深入到源代码层次,为读者梳理出Docker容器技术和基于Docker的容器云技术(如Kubernetes)的实现方法和设计思路,帮助读者理解如何在实际场景中利用Docker解决问题并启发新的思考。全书包括两部分,第一部分深入解读Docker容器技术,包括Docker入门、架构总览、Docker容器核心原理解读,以及Docker高级实践技巧;......一起来看看 《Docker——容器与容器云》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具