CSS3响应式布局

CSS3响应式布局

 

1、media-Css3响应式　

　　媒体类型:

　　　　all 全部媒体

　　　　screen 彩屏设备

　　　　print 用于打印机和打印预览

　　　　speech 应用于屏幕阅读器等发声设备

　　　　braille 应用于盲文触摸式（已废弃 ）

　　　　embossed 用于打印的盲人印刷设备（已废弃 ）

　　　　projection 用于投影设备（已废弃 ）

　　　　tty 不适用像素的设备（已废弃 ）

　　　　tv 电视（已废弃 ）

　　关键字:

　　　　and not 用来排除某种制定的媒体类型

　　　　only (限定某种设备)某种特定的媒体类型

　　媒体特性:

　　　　(width:600px) 宽

　　　　(max-width:600px) 最大宽度 <=600

　　　　(min-width: 480px) 最小宽度 >=480

　　　　(orientation:portrait) 竖屏

　　　　(orientation:landscape) 横屏

2、Css3响应式布局

　　方式一：媒体查询：@media [not|only] mediatype [and] (media feature) { CSS-Code; }

　　　　例： @media screen and (min-width:400px) and (max-width:500px) { .box {margin: 0 auto;} }

　　　　　　//值与值之间须要有空格，and先后也要有空格

　　方式二：@import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature); 需顶行写

　　　　例：@import url("css/reset.css") screen;

　　方式三：样式引入

　　　　<link rel="stylesheet" type="text/css" href="print.css" media="print" />

　　　　<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 800px)">

　　　　<link rel="stylesheet" type="text/css" href="B.css" media="screen and (min-width: 600px) and (max-width: 800px)">

　　　　<link rel="stylesheet" type="text/css" href="C.css" media="screen and (max-width:600px)">

　　　　<link rel="stylesheet" type="text/css" media=”all and (orientation:portrait)” href=”portrait.css”>

　　　　<link rel="stylesheet" type="text/css" media=”all and (orientation:landscape)”href=”landscape.css”>

3、viewport-Css3响应式　

　　<meta name="viewport" content="" />

　　　　视口的做用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，而后展现

　　　　width [pixel_value | device-width]       例如:  width = 640

　　　　height [pixel_value | device-height]

　　　　initial-scale 初始比例

　　　　minimum-scale 容许缩放的最小比例

　　　　maximum-scale 容许缩放的最大比例

　　　　user-scalable 是否容许缩放 （yes || no 或 1 | 0）

　　　　target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

　　<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　　　此属性为文档兼容模式声明，表示若是在IE浏览器下则使用最新的标准渲染当前文档

　　　　emmet快捷键：meta:compat