css3 - Media Query

常见的属性：

1. device-width，device-height  --  屏幕宽高

2. width，height                          --  渲染窗口宽高

3. orientation                                --  设备方向

4. resolution                                  --  设备分辨率
   

分辨率改变css的样式

1

移动互联网的多终端显示

响应式设计

CSS3-Media Query:

device-width, device-height 屏幕宽高

width, height: 渲染窗口宽高

orientation 设备方向

resolution 设备分辨率

响应式设计的原则

移动优先：

1：在设计的初期就要考虑的页面如何在多终端展示

渐进增强

1：充分发挥硬件设备的最大功能

响应式布局的优点和缺点

优点：

1：解决了设备只见的差异化展示

缺点：

1：兼容性代码多，工作量大，加载速度受影响。

2：对原有网站对布局会产生影响，用户判断未必准确

响应式设计

1：让一个网站可兼容不同分辨率的设备

2：给用户更好的视觉使用体验

css3-Media Query

常见的属性：

device-width,device-height---屏幕宽高

width,height---渲染窗口宽高

orientation---设备方向

resolution----设备分辨率

bootstrap是移动优先框架，要求写<meta name="viewport" content="width=device-width,initial-scale=1.0">

引用bootstrap <link href="css/bootstrap.min.css" rel="stylesheet">

IE8、IE9需要引入respond.js:

Bootstrap框架可以解决低端浏览器不支持css3属性的问题，还能解决不同的分辨率设备上网页的布局展示

Bootstrap:1.移动优先的简单框架  2.好处是写非常少的代码即可实现多终端的页面适配

类似IE8这种古老的浏览器，不支持media query,  需要引入Respond.js 去激活media query,Respond.js必须部署在websever域名下，不能在静态资源域名,存在跨域

@media screen and (min-width:480px){

        body{background:blue;}

}

    当屏幕大于480 背景变成蓝色

<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)">外链引入       

当屏幕小于480的时候才能引用

如何实现响应式布局

1. CSS3-Media Query(最简单的方式)

2. 借助原生Javascript(成本高，不推荐使用)

3. 第三方开源框架（可以很好的支持浏览器响应式布局的设计）

响应式设计的原则

1. 移动优先：在设计的初期就要考虑的页面如何在多终端展示

2. 渐进增强:充分发挥硬件设备的最大功能（IE6、IE7、IE8等低端浏览器不支持CSS3的属性，需要用javascript方法hack完善交互，但在高端浏览器和支持css3属性的浏览器 充分发挥硬件设备的功能，给用户带来更完美的体验）
   

一、响应式设计优    

 1》 优点：解决了设备只见的差异化展示    

  2》 缺点：兼容性代码多，工作量大，加载速度受影响  

                   对原有网站布局会产生影响，用户判断未必精确

一、什么是响应式设计：1.让一个网站可兼容不同分辨率的设备 2.给用户更好的视觉使用体验

二.移动互联网催生了响应式布局的诞生

<meta name = "viewport" content = "width = device - width,initial-scale =1.0">缩放=1.0

ie8y引入respond.js

css,js,fonts

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

@media screen and (min-with:480px){

     body{background:blue;}

}

media query

外部样式引用格式 

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

内部引用格式

@media screen and (max-width:500px) {body{background:red}}

实现响应式布局的三种方法

css3-Media Query

常见的属性：

device-width,device-height---屏幕宽高

width,height---渲染窗口宽高

orientation---设备方向

resolution----设备分辨率