自己动手写响应式布局
1. 不多说看一下需求
- 现有的响应式框架(bootstrap)在一些使用上边不能满足你的需要(你要做的比较少,框架提及做得多)
2.不想引进那么多的文件,就一个页面只想简单处理
3.性能追求极致,框架的引入文件,和自己的文件引入的太多了,
4.逼格提升,想自己写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
//%%开发时不能这样处理margin和padding%%
* {
margin: 0;
padding: 0;
}
@media (min-width:0px) and (max-width: 768px) {
.header {
width: 100%;
height: 300px;
background-color: yellow;
}
}
@media (min-width:769px) and (max-width:992px){
.header {
width: 100%;
height: 250px;
background-color: red;
}
}
@media (min-width: 993px) and (max-width: 1200px){
.header {
width: 100%;
height: 200px;
background-color: blue;
}
}
@media (min-width: 1201px) and (max-width: 1400px){
.header {
width: 100%;
height: 200px;
background-color: pink;
}
}
</style>
</head>
<body>
<header id="header" class="header">
</header>
</body>
</html>
- 注意你要兼容市场上95%以上的屏幕,超大屏幕注意也要兼容(1200px—1400px||1600px),但是由主要兼容的屏幕区间
2.想查看市场上屏幕的使用情况:https://tongji.baidu.com/web/welcome/login (百度统计,想看什么就有什么)
3.上面的代码只有header部分,比你想写的那部分内容放在相应的位置,,头部是这样,,main也是这样
4.自己写响应式比较麻烦,可能需要不止一套的UI设计稿,如果项目时间允许,可以自己写,自己权衡!
如果有什么建议或者意见,邮箱:weexss@163.com