HTML5学堂-码匠 HTML5学堂

您当前位于:移动端开发 ——> 移动端开发知识[系列] - CSS3媒体查询 CSS3 Media Query

移动端开发知识[系列] - CSS3媒体查询 CSS3 Media Query

2015/04/27 19:31:52 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词:移动端开发,CSS3,媒体查询,media query

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

HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者,除了能够处理传统平台的网站,还需要能够处理移动端的网页。可是,新的事物伴随着各个浏览器,也就冒出了各种兼容问题。第三步——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 ——电视类

欢迎沟通交流~HTML5学堂

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

有条件地应用样式

  1. <style>
  2. @import url("main.css") screen; /* 针对屏幕加载main.css */
  3. @media print {
  4. /* 针对打印机的样式 */
  5. }
  6. </style>

有条件地加载样式表

  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>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端