本文介绍了CSS3的新特性，如column-count列数设置、column-width列宽控制，以及如何通过媒体查询实现屏幕适配。重点讲解了列间距column-gap和边框column-rule。同时讨论了响应式设计的开发策略，包括移动端meta标签的使用和box-sizing属性在滚动条问题上的应用。
css新增样式：
column-count：3；列数
column-width：100px；列宽
简写：column：width count；
column-gap：2em；列间距
column-rule：2px #f00 outset；
媒体查询：
@media screen and (max-width:800px){
.list{
width:;
height:;
}
}
自适应布局：屏幕分辨率变化时，位置会变化但大小不会变化，需要开发多套。
响应式布局：只需要开发一套，布局没有变化，大小会变化。
移动端：meta标签
<meta name="viewport" content:"width=device-width,intital-scale=1.0,maxmum-scale=1.0,minimum-sacle=1.0,use-scalable=no"/>
inital-scale:初始缩放比例
maximu-scale：允许用户缩放的最大比例
如果有滚动条：加box-sizing=border-box;变怪异盒子模型
扫一扫
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
