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

响应式布局

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

 

响应式布局的优缺点

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

 

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

一、media query：

　　经过不一样的媒体类型和条件定义样式表规则。媒体查询让CSS能够更精确做用于不一样的媒体类型和同一媒体的不一样条件

 

二、语法结构及用法

　　@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" />