响应式布局

Posted 2020-06-30

SS响应式布局：一个网站能够兼容多个终端，而不是每一个终端做一个。
优点：面对不同分辨率设备灵活性强
能快捷解决多设备显示适应的问题
缺点：效率低下，兼容各种设备导致工作量巨大
代码累赘，隐藏无用的元素导致加载的时间加长
这是一种折中性质的解决方案，多方面因素影响而达不到最佳的效果
一定成都上改变了网站原有的布局结构，就会出现用户混淆的情况
CSS3媒体查询语法:@media screen and (max-width: 1000px) {
body{
background: red;
}
.box1{
width: 100px;
height: 100px;
background: greenyellow;
}
}
@media screen and (max-width: 800px) {
body{
background: orange;
}
}
@media screen and (max-width: 600px) {
body{
background: skyblue;
}
}
外联写法：<link rel="stylesheet" media="screen and (max-width: 1000px)" href="XX.css" />
<link rel="stylesheet" media="screen and (max-width: 800px)" href="YY.css" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="ZZ.css" />