版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/focusdroid/article/details/78163472
自己动手写响应式布局
1. 不多说看一下需求
- 现有的响应式框架（bootstrap）在一些使用上边不能满足你的需要（你要做的比较少，框架提及做得多）
2.不想引进那么多的文件，就一个页面只想简单处理
3.性能追求极致，框架的引入文件，和自己的文件引入的太多了，
4.逼格提升，想自己写
2. 不多说原理简单，就是新的属性@media
<!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设计稿，如果项目时间允许，可以自己写，自己权衡！