<link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)">
可以控制屏幕多大尺寸的时候是否加载此css文件
<style> 内联media记得加@
@media screen and (min-width: 640px) {
body{
background-color: antiquewhite;
}
}
@media screen and (min-width: 960px) {***}
css文件中添加多个,设置不同布局。
.menu{
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
flex-direction: row;
flex-wrap: wrap;
}
.menu li{
height: 40px;
text-align: center;
line-height: 40px;
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.menu li a{
text-decoration: none;
color: #000;
}
.menu li:nth-child(1){
background-color: bisque;
}
.menu li:nth-child(2) {
background-color: aqua;
}
.menu li:nth-child(3){
background-color: #4b0dff;
}
.menu li:nth-child(4){
background-color: #ff1829;
}
.menu li:nth-child(5){
background-color: #fffdfe;
}
.menu li:nth-child(6){
background-color: #5affff;
}
@media (min-width: 480px){
.menu li{
-webkit-box-flex: 1;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
}
@media (min-width: 700px) {
.menu {
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
}
body{
padding: 0;
margin: 0;
}
h1{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: black;
box-shadow:0 2px 6px rgba(0,0,0,.5);
top:0px;
margin-top: 0;
padding-top: 0;
position: fixed;
}
.pic{
width: 90%;
margin: 50px auto;
column-count: 1;
column-gap: 20px;
list-style-type: none;
column-rule: 10px dashed red;
}
.pic li{
margin-top: 10px;
}
@media (min-width: 600px) {
.pic {
column-count: 3;
}
}
@media (min-width: 800px) {
.pic {
column-count: 4;
}
}
使用bootstrap开发前端页面,快速高效,和Swift宗旨一样,嘿嘿