本文介绍了CSS3中的分栏布局和媒体查询在移动端开发中的应用。通过实例展示了如何使用column-count、column-width等属性实现响应式分栏，以及如何利用媒体查询（@media）进行不同设备的布局适配。强调了rem单位在移动端自适应布局中的重要性，并对比了标准盒模型与怪异盒模型的区别。
前言
前面已经学完了html、html5、css以及css3的内容，今天会在补充一个css3的布局样式，但是侧重于移动端的基础知识
PC开发考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，更多考虑的是手机分辨率的适配。
在布局上，移动端开发要做到布局自适应的，需要熟练使用rem布局
提示：以下是本篇文章正文内容，下面案例可供参考
一、css3新增布局样式
1.分栏
1.1column-count：4 列数/栏数
浏览器越宽，列数越宽
1.2count-width00px 栏宽/列宽
设置好单位后，不管有多少列，宽度都是200px
简写形式：
columns：200px 4； 200px*4=800px
也就是说，如果浏览器大于800px ， 当然也要算上中间的空隙，就不止800px了
如果小于800px时，就按栏宽来算
1.3column-gap：10px 列间距 / 栏间距
和margin相似
1.4column-rule：1px solid #fff； 栏边框样式
举个栗子：
<style type="text/css">
p{
columns:200px 4;
column-gap: 12px;
column-rule: 2px dotted pink;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque facere rerum voluptatem voluptates iure quae fugiat perferendis fuga omnis neque sequi commodi doloremque quibusdam provident repellendus culpa nulla minus magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque facere rerum voluptatem voluptates iure quae fugiat perferendis fuga omnis neque sequi commodi doloremque quibusdam provident repellendus culpa nulla minus magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque facere rerum voluptatem voluptates iure quae fugiat perferendis fuga omnis neque sequi commodi doloremque quibusdam provident repellendus culpa nulla minus magnam?</p>效果如下：
上面的代码效果因为浏览器视口没有大于800px，所以按栏宽排列
二、媒体查询
说到媒体查询就会说到两个布局，响应式布局和自适应布局
2.1 响应式布局，根据不同的设备对网页进行调整布局
2.2 自适应布局 ，为不同的屏幕分辨率定义布局
1.@media screen and （max-width ： 500px）
screen 针对有屏的设备，最大宽度是500px （0-500px）时的box样式
.box {
width: 50px;
height: 50px;
background-color: #FFC0CB;
transition: 1s;
}
@media screen and (max-width:1000px) {
.box {
width: 400px;
height: 400px;
background-color: aquamarine;
}
}
@media screen and (max-width:500px) {
.box {
width: 400px;
height: 400px;
background-color:#f00;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
如果有多个样式（max-width：值），把值大的写到前面，从大往小写，不然会看不到小的效果
2.@media screen and （min-width ： 500px）
.box {
width: 500px;
height: 500px;
background-color: #FFC0CB;
transition: 1s;
}
@media screen and (min-width:500px) {
.box {
background-color: aquamarine;
}
}
@media screen and (min-width:800px) {
.box {
background-color:#f00;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
如果有多个样式（min-width：值），把值小的写到前面，从小往大写
三、单位
px 绝对单位
em 相对单位，受当前字号大小或者是父元素的影响，如果没有设置，那么1em=16px
rem 相对单位，常用于移动端，受根标签html的影响，如果没有设置，那么1rem=16px
四、盒子模型
1.标准盒模型
盒子大小=width（内容）+padding+border
width，heigth是内容content区域的大小
2.怪异盒模型
width+height=盒子宽度
如果给盒子加了border ， padding会把内容区域变小
需要学习一个新的元素
box-sizing：content-box 默认的，内容盒，标准盒
box-sizing：border-box 怪异盒
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
