一.分栏column
column-count 栏数 列数
column-width 栏宽 列宽
column-gap 列间距 栏间距
column-rule
columns
>=800按栏数
<800按栏宽
二.媒体查询：
@media screen and{max-width:}{}
三.自适应布局和响应式布局
1、自适应布局
自适应布局就是指能忘了使网页自适应的显示在不同
大小终端设备上的新网页设计方式及技术，它需要开
发多套界面来适应不同的终端。
2、响应式布局
响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
区别
1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
3.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。
4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。
四.em与rem
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
em受当前字号大小影响
rem是全部的长度都相对于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
