响应式布局之媒体查询功能
2016-05-11 19:52
253 查看
实现响应式布局有很多方法:
媒体查询功能:Media Queries就是其中之一
media用来指定特定的媒体类型,例如屏幕(screen)和打印(print)和支持所有媒体介质的all
如果要在head部分引用,形式如下:
当然还可以在<style></style>中引用:
通过一个简单的例子就明白了怎么媒体查询了:
例子很简单,max-width为品目显示最大宽度,因此:
当屏幕宽度大于800时,显示一个600*600的大红块
小于或等于800时,显示一个500*500的黄色div
同理,屏幕宽度小于等于500时,显示一个300*300的蓝色div
效果如图:
1.屏幕宽度为:1366px全屏状态
2.屏幕宽度为611px
3.屏幕宽度为440px
同理:也可以用min-width表示当屏幕宽度大于或等于xxxpx时的状态
或者采用screen and (min-width:600px) and (max-width:900px)结合多个媒体查询
媒体查询功能:Media Queries就是其中之一
media用来指定特定的媒体类型,例如屏幕(screen)和打印(print)和支持所有媒体介质的all
如果要在head部分引用,形式如下:
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
当然还可以在<style></style>中引用:
<style type="text/css"> @media screen{ 选择器{ 属性:属性值; } } </style>
通过一个简单的例子就明白了怎么媒体查询了:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>media Queries</title> <style> div{ width: 600px; height: 600px; background-color: red; } @media (max-width: 800px) { div{ width:500px; height:500px; background-color:yellow; } } @media (max-width: 500px) { div{ width:300px; height:300px; background-color:blue; } } </style> <body> <div></div> </body> </html>
例子很简单,max-width为品目显示最大宽度,因此:
当屏幕宽度大于800时,显示一个600*600的大红块
小于或等于800时,显示一个500*500的黄色div
同理,屏幕宽度小于等于500时,显示一个300*300的蓝色div
效果如图:
1.屏幕宽度为:1366px全屏状态
2.屏幕宽度为611px
3.屏幕宽度为440px
同理:也可以用min-width表示当屏幕宽度大于或等于xxxpx时的状态
或者采用screen and (min-width:600px) and (max-width:900px)结合多个媒体查询
相关文章推荐
- ssh中 各种映射文件的作用及详解
- Ubuntu下实现socks代理转http代理
- 理解Linux系统:/etc/init.d/目录
- JVM调优Demo(一)避免新生代过小(增大新生代大小)
- iframe 父子窗口调用
- spilt的用法小结
- android自定义键盘实现
- SQL优化小结
- 结构体版本兼容问题
- 输出16进制数和冒泡排序法
- PyCharm使用(一)
- 第五次作业
- [翻译]CSS模块-未来的编码方式
- 6. ZigZag Conversion
- MPEG1的码流层次与各层次的作用
- 数据结构笔记--栈的总结及java数组实现简单栈结构
- H5Css3动画 背景图 制作帧动画
- #if/#if defined/#ifdef
- 反射调用
- js获取当前日期