响应式布局初始(一)

响应式布局初始(一)

响应式布局是为了实现网页页面适应各种设备屏幕,如手机打印机等各个不同的终端。

媒体查询模块

媒体查询(Media Queries)查询主要包括两个重要的内容:媒体类型和媒体特性;

媒体类型
媒体指定的值 类型描述
all 所有的媒体设备
screen 显示器、手机、平板等设备
print 打印机或者打印预览视图
speech 屏幕阅读器等发声设备
handheld 如Pad和小型电话等掌上设备或者更小的设备
tv 电视机类型设备
projection 投影设备
embossed 盲文打印机
braille 盲文触摸式反馈设备
tty 用于固定的字符网格,如电报,终端设备等

常用的是前面三个(all、screen、print),后面的类型在W3C中已经被废弃。

媒体特性

在CSS3中媒体特性于CSS属性类似,但于CSS属性不同的是,美特特性使用min/max来对大于等于或小于进行逻辑判断

媒体特性的属性 描述
width和height 浏览器窗口的高和宽
device-width和device-height 输出设备的宽和高
orientation 浏览器窗口方向(纵向:portrait、横向:landscape)
resolution 设备的分辨率
aspect-ratio 浏览器窗口宽度与高度的比率
device-aspect-ratio 输出设备屏幕的可见宽度与高度的比率
color 输出设备的颜色值,非彩色设备,则为0
color-index 输出设备的彩色查询表中的色彩数,没有查询表,则为0
monochrome 一个单色帧缓冲区中每像素包含的字节数,非单色设备,则为0
scan 电视类设备的扫描方式,逐行扫描:progressive,隔行扫描:interiace
grid 用于查询输出设备是否使用栅格或点阵,基于栅格时值为1,否则为0
Media Queries 的引用方法
(1)使用link方法引用样式
<link rel="stylesheet" type="text/css" href="mystyle.css" media="sccreen" />
<link rel="stylesheet" type="text/css" href="mystyle.css" media="sccreen and (max-width:1200px)" />
(2)@import方法引用
<head>
    <style type="text/css">
        @importurl(mystyle.css) screen and (max-width:900px);
    style>
head>
(3)@media方法引用
<style>
    @media 媒体类型 and (媒体特性){样式定义}
style>
CSS3媒体查询的具体应用
(1)最大宽度:max-width
@media screen and (max-width:480px){
    .ads{
        display:none;
    }
}
/*  当屏幕的宽度小于等于480px时,页面中ads这个类隐藏*/
(2)最小宽度:min-width
@media screen and (min-width:900px){
    .ads{
        width:900px;
    }
}
/*当屏幕宽度大于等于900px时,页面中ads类的宽度为900px*/
(3)使用多个媒体特性
@media screen and (min-width:600px) and (max-width:1200px){
    .ads{
        background-color:#f90;
    }
}
/* 当屏幕的宽度大于600px小于1200px时,页面中ads类的背景颜色为#f90 */
(4)device-width
<link rel="stylesheet" media="screen and (nax-device-width:500px)" href="mystyle.css" />

(5)not关键词
@media not print and (min-width:1200px){样式代码}
/* 样式代码适用于除打印设备和宽度大于1200px的所有设备上 */
(6)only关键词
<link rel="stylesheet" media="only screen and (max-device-width:300px)" href="mystyle.css" />



你可能感兴趣的:(响应式布局,css3)