移动端H5知识普及[系列] - CSS3媒体查询

2019阿里云全部产品优惠券(好东东,强烈推荐)
领取地址 https://promotion.aliyun.com/ntms/yunparter/invite.html

推荐:css3 media媒体查询器用法总结

[转自:http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在

移动端H5知识普及 - CSS3媒体查询

前些日子,趁平日空隙书写了类库系列,这几天就来“普及”一下移动端HTML5开发的小知识吧~!虽然知识小,但是不得不承认的是,它们很重要~!

本系列共6篇文章,如下为标题列表:

  • 1 谈谈相对单位

  • 2 什么是视口

  • 3 CSS3媒体查询

  • 4 移动端“百变”盒模型

  • 5 移动端“背景”妙用

  • 6 移动端fixed定位模式

第三篇 CSS3媒体查询(CSS3 media query)

我们每个人都有自己的属性,例如年龄、性别、身高、体重等。作为媒体(电脑、手机、电视、电话),也有它们的特性。CSS3针对所有的媒体均定义了width、color等媒体特性。作为媒体特性本身,其作用并没有什么,但是对于我们来说,我们可以通过检测媒体的特性确定不同的媒体,从而执行相应处理。那么此时就涉及到了我们的媒体查询~

媒体查询是一些逻辑表达式,用于计算用户浏览器中媒体特性的当前值,如果媒体查询表达式计算的结果为true,则应用其所包含的CSS规则。

常见viewport数值

  • braille ――触觉反馈设备

  • embossed ――盲文印刷设备

  • handheld ――小型或手持设备

  • print ――打印机

  • projection ――投影图像,如幻灯

  • screen ――计算机显示器

  • speech ――语音合成器

  • tty ――打字机

  • tv ――电视类

根据不同设备加载不同样式 demo

有条件地应用样式

  1. <style>

  2.     @import url("main.css") screen; /* 针对屏幕加载main.css */

  3.     @media print {

  4.         /* 针对打印机的样式 */

  5.     }

  6. </style>

有条件地加载样式表

推荐:Css3媒体查询使用

[http://my.oschina.net/u/2352644/blog/616042 css3媒体查询技术的出现,在多设备支持上为我们提供了解决方案。 媒体查询的使用方法: @media screen and (max-width: 4

  1. <head>

  2.     <link rel="stylesheet" href="main.css" media="screen" />

  3.     <link rel="stylesheet" href="paper.css" media="print" />

  4.     <link rel="stylesheet" href="tiny.css" media="handheld"/>

  5. </head>

媒体特性

  • width 布局视口宽度

  • height 布局视口高度

  • device-width 设备屏幕宽度

  • device-height 设备屏幕高度

  • orientation 设备方向

  • aspect-ratio 视口宽高比

  • device-aspect-ratio 屏幕宽高比

  • resolution 设备像素密度

根据不同媒体特性加载不同样式 demo

有条件的应用样式

  1. <style>

  2.     @media all and (min-width:500px) { … }

  3.     @media (orientation: portrait) { … }

  4. </style>

有条件的加载样式表

  1. <head>

  2.     <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />

  3.     <link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />

  4. </head>

结束~!

 

欢迎大家互相学习交流。独行冰海


推荐:CSS3 之媒体查询Media Query

[Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写。传说中的Web响应式布局就可以毫

相关推荐