CSS学习笔记——响应式布局
2015-08-26 11:01
711 查看
响应式布局
响应式布局是现在很流行的一个设计理念,随着移动互联网的盛
行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效
果,设计师提出了响应式布局的设计方案。所谓的响应式布局,就是
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个
终端。
响应式布局的优缺点
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
根据不同的显示器调整设计最适合用户浏览习惯的页面
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨识度不强
利用CSS3-Media Query实现响应式布局
1、media query:
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件
2、语法结构及用法
@media 设备名 only (选取条件) not (选取条件) and (设备选取条件),设备二 {sRules}
(1)在link中使用@media:
(2)在样式表中内嵌@media:
[b]特殊设备检测[/b]
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" />
响应式布局是现在很流行的一个设计理念,随着移动互联网的盛
行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效
果,设计师提出了响应式布局的设计方案。所谓的响应式布局,就是
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个
终端。
响应式布局的优缺点
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
根据不同的显示器调整设计最适合用户浏览习惯的页面
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨识度不强
利用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>
[b]特殊设备检测[/b]
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" />
相关文章推荐
- css min-width与max-width的使用
- HTML+CSS笔记
- PHPExcel样式控制
- CSS中display和visibility隐藏元素的区别
- html引入css文件的名字大小写问题
- 关于HTML,css3自适应屏幕,自适应宽度
- CSS浏览器兼容性问题集()两
- CSS代码段
- 慢慢说CSS第三天
- 15-07-27 HTML-样式-格式与布局
- CSS中的居中:完全指导
- CSS学习------之简单图片切换
- css hack技巧
- div css水平垂直居中
- css3颜色
- 样式和主题的设定,和自定义
- web前端html+css常用布局04
- web前端html+css常用布局03
- web前端html+css常用布局02
- web前端html+css常用布局01