如何写点响应式布局的代码
的有关信息介绍如下:如何写点响应式布局的代码,首先我懂得不是太多,就是跟着网上一点一点的去学去做,多去练练,相信孰能生巧,说不定几年后还能找到相对应的工作呢。
首先,我们把里面的内容写出来。
我们写下代码,
@media (min-width: 1024px){
#xiangyingshi {
width: 1024px;
height: 300px;
margin: 50px auto;
background: blue;
}
}
我们继续写下其他浏览器尺寸的问题;
@media (min-width: 768px) and (max-width: 1024px){
#xiangyingshi {
width: 80%;
height: 300px;
margin: 50px auto;
}
}
然后再写下小部分尺寸的问题。
@media (max-width: 768px){
#xiangyingshi {
width: 90%;
height: 300px;
margin: 50px auto;
}
}
我们在浏览器中看下最终效果。
把浏览器缩小再看下结果。为方便观看,加了颜色,完整代码为
@media (min-width: 1024px){
#xiangyingshi {
width: 1024px;
height: 300px;
margin: 50px auto;
background: blue;
}
}
@media (min-width: 768px) and (max-width: 1024px){
#xiangyingshi {
width: 80%;
height: 300px;
margin: 50px auto;
background:#0FC;
}
}
@media (max-width: 768px){
#xiangyingshi {
width: 90%;
height: 300px;
margin: 50px auto;
background:#F00;
}
}