最简单的响应式布局例子
2016-01-05 00:30
316 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .foo { width: 1200px; height: 400px; background: #ccc; margin: 20px auto; } /*如果连续的min-with,那么两者之间就可以构成一个范围()*/ /* * [500,900), [900,1200), [1200,?) */ @media screen and (min-width: 500px) { .foo { width: 200px; } } @media screen and (min-width: 900px) { .foo { width: 600px; } } @media screen and (min-width: 1200px) { .foo { width: 1000px; } } </style> </head> <body> <div class="foo"></div> </body> </html>
相关文章推荐
- C语言数据库
- 机器学习笔记_ SVM
- Visual Studio 编译纯 C 项目的方法
- 主流3D打印技术
- Linux - spacemacs
- react native之helloworld
- Continuous in mathimatics
- leetcode 27: Remove Element
- android开发规范
- G - 免费馅饼
- Android 面试题(答案最全)
- http协议(三)
- e服务众筹平台简介
- 如何设计测试用例
- Java集合:线性表: JAVA_ArrayIntList
- 笔试,面试,C/C++,判断单链表是否带环?若带环,求环长度,求环入口点(两种方法)
- php 函数返回多个值
- Node.js使用fs.renameSync报cross-device link not permitted错误
- zvszui项目中安装后的配置(防忘记,费时)
- Qt Creator 你必须要掌握的快捷操作