css3 @media 实现响应式布局
2016-02-29 22:06
696 查看
使用css3的@media,可以实现针对不同媒体、不同分辨率的响应式布局。
方法1:根据不同分辨率使用不同css文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
例如
方法2:同一css文件中,根据不同分辨率使用不同样式
参考:
http://www.runoob.com/cssref/css3-pr-mediaquery.html
方法1:根据不同分辨率使用不同css文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
例如
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="middle.css" /> <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
方法2:同一css文件中,根据不同分辨率使用不同样式
.first {background-color: white;} .second {background-color: black;} @media screen and (max-width: 800px) { /*当屏幕尺寸小于800px时,应用下面的CSS样式*/ .first {background-color: green;} .second {background-color: skyblue;} } @media screen and (max-width: 480px) { /*当屏幕尺寸小于480px时,应用下面的CSS样式*/ .first {background-color: yellow;} .second {background-color: red;} }
参考:
http://www.runoob.com/cssref/css3-pr-mediaquery.html
相关文章推荐
- day02 css+js
- 第四天:css基础
- Demo14:图片渐入
- HTML+CSS慕课网学习总结(六)
- HTML+CSS慕课网学习总结(五)
- css 表格border-collapse
- CSS3 box-sizing属性
- CSS 元素垂直居中的 6种方法
- 修复BUG:gulp自动添加版本号修复对CSS中background:url()的匹配问题
- 弹性盒子(部分元素伸缩,部分元素不伸缩)
- less
- HTML+CSS学习笔记 (6) - 开始学习CSS
- 关于文字不能两端都对其的样式
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
- HTML+CSS学习笔记(4) - 认识标签(3)
- HTML+CSS学习笔记(3)- 认识标签(2)
- css常用的隐藏元素的方式
- CSS3鼠标滑过渐变颜色旋转图标特效
- 行间样式具有优先级
- 标签(改变样式style)