CSS学习笔记——响应式布局

响应式布局

　　响应式布局是现在很流行的一个设计理念，随着移动互联网的盛
行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效
果，设计师提出了响应式布局的设计方案。所谓的响应式布局，就是
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
也就说一个页面可以在多个终端呈现出你想要的效果，能够兼容各个
终端。

响应式布局的优缺点

优点：
　　面对不同分辨率设备灵活性强
　　能够快捷解决多设备显示适应问题
　　根据不同的显示器调整设计最适合用户浏览习惯的页面
缺点：
　　兼容各种设备工作量大，效率低下
　　代码累赘，会出现隐藏无用的元素，加载时间加长
　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
　　因为要适应不同的设备，页面的结构可能会有所不同，会导致页面的辨识度不强

利用CSS3-Media Query实现响应式布局

1、media query：

　　通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件

2、语法结构及用法

　　@media 设备名 only （选取条件） not (选取条件) and （设备选取条件），设备二 {sRules}

　　(1)在link中使用@media：

<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)"

　　（2）在样式表中内嵌@media：

<style>
  @media  screen and (min-width: 600px) {
     .one{
        border:1px solid red;
        height:100px;
        width:100px;
     }

  }
</style>

特殊设备检测
1.Phone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
type="text/css" href="iphone4.css" />
2.iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"
type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"
type="text/css" />
3.android
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)"
href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-
width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-
width:480px)" href="android480.css" type="text/css" />