css3-响应式设计

多列

column-count :设置列的个数，可以把一行文字分割成设置的列的个数。如果设置了列的宽度，当列的最小宽度和不够总宽度的时候，列的数量就会缩小；

column-width: 可以设置列的最小宽度；

column-span ：可以设置列的横跨数量（常用于设置标题，值为1或者all）

column-rule :设置分割线，设置方式与边框的设置方式一样，是一个复合属性；

column-gap: 设置列的间距；

单位 ： rem px em 百分比 pt

em： 相对 单位，基准点为 父节点 字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值 。

rem： 相对单位，可理解为”root em”, 相对 根节点 html的字体大小来计算， CSS3 新加属性，chrome/firefox/IE9+支持 。

-> 1. 可以让比较小的屏幕展示更多内容并且可以按照屏幕的宽度来设置字号（小屏幕小字号大屏幕设置大字号）；

-> 2. 如果所有的宽高字号都用rem表示，那么所有的内容展示的宽高字号都是响应式的；

媒体查询

@media（max-width:600px） and or 其他条件{满足条件的样式}

视口：用于设置移动端显示内容窗口的配置

<!--设置视口 视口设备宽度，原始缩放比例为1，不允许 用户缩放-->

<meta name= "viewport" content= "width=device-width, initial-scale=1,user-scalable=no" >

处理媒体查询不支持的方式

1.加载处理不兼容的脚本文件

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js "</script>  

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js "></script> 

2.更改IE浏览器渲染内容时，使用的内核

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

弹性盒/弹性布局 （微信小程序常用）

新的布局方式 （以前浮动、定位布局）

display：flex 设置为弹性盒

flex-direction ：设置弹性盒内子元素的排列方向row、row-reverse、 column、column-reverse；

flex-wrap ：设置弹性盒内子元素超出父容器时是否换行；

nowrap：不换行

warp：自动换行

wrap-revserse：自动反转换行

justify-content ：设置 水平 方向的排布方式；

flex-start：默认设置起始点位置对齐

flex-end：设置以结束点对齐

center：以中心点对齐

space-between：设置水平方向的间距平均分配

space-around：设置水平方向平均分配，并且起始点和结束点都占间距的一半；

align-items： 设置 垂直 方向的排列方式；

flex-start、baseline、stretch都是以起始点的方式排列；

flex-end：以结束点对齐；

center：垂直方向居中；

align-content ：

flex-start：默认设置起始点位置对齐

flex-end：设置以结束点对齐

center：以中心点对齐

space-between：设置垂直方向的间距平均分配

space-around：设置垂直方向平均分配，并且起始点和结束点都占间距的一半；

order：给元素重新排序，数值越小的越在前面；

flex：设置元素的分配比例；

node:

使用node使用两部分

1.npm：是node的包管理工具，可以下载基于node的插件

更改为国内镜像 http://npm.taobao.org/ --> cnpm

2.使用API的部分，可以用于写服务端

npm常用操作指令：

install：安装 i

-g： 安装到全局（global）目录下（在任何工程中，都可以使用这个插件）

uninstall：卸载