频道栏目
首页 > 资讯 > HTML/CSS > 正文

css3-响应式设计

17-08-21        来源:[db:作者]  
收藏   我要投稿

多列

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 其他条件{满足条件的样式}

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

name="viewport"

content="width=device-width, initial-scale=1,user-scalable=no">

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

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

 

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

 

弹性盒/弹性布局(微信小程序常用)

新的布局方式 (以前浮动、定位布局)

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:卸载

相关TAG标签
上一篇:jQuery学习之大轮播+小轮播
下一篇:Linux常用命令之目录管理
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站