【HTML5响应式网页】

@一HTML响应式网页（2）

2.1响应式布局

2.1.1响应式布局介绍

2.1.2视图概念

移动设备上的视口就是设备的屏幕能用来显示用户网页的那一块区域。具体地说，就是浏览器上用来显示网页的那部分区域
在页面加载时，可以使用meta标签设置浏览器的视口(viewport)的宽度

语法：

<meta name="viewport“ content="width=device-width,initial-scale=1.0,maximum-scale=1.0,   user-scalable=0" />

视口的相关属性设置

2.2 媒体查询

2.2.1媒体查询介绍

• 媒体查询是制作响应式布局的一个利器，能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果

• 媒体查询可以获取的值如下 ：

         设备的宽和高
         
          渲染窗口的宽和高  
  
          设备的手持方向  
  
          画面比例  
  
          设备比例
  
          对象颜色或颜色列表  
  
          设备的分辨率
  

2.2.2 媒体查询语法结构及用法

语法： 媒体查询的基本语法。

@media 设备名 only（选取条件）not（选取条件）and（选取条件）
{ 
          CSS样式规则
}

only（限定某种设备，可省略）、and（逻辑与）和 not（排除某种设备）为逻辑关键字，多种设备用逗号分隔。

可用设备名参数

媒体查询部分属性

媒体查询在网页使用中有两种方式
在样式表中 ：

@media all and (max-width: 1024px) {
    /* 适合低分辨率桌面浏览器和横屏iPad */
}
@media all and (max-width: 768px) {
    /* 适合很低分辨率桌面浏览器和竖屏iPad */
}

在 link 中使用 @media
语法

<!--适合低分辨率桌面浏览器和横屏iPad-->
<link rel=“stylesheet” type=“text/css” media=“all and (max-width: 768px)” href=“ipad.css”/>