学习要点: 1.辅组类 2.响应式工具 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具, 辅助类提供了一组类来辅组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容。 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的 ...
分类:
其他好文 时间:
2016-04-24 08:37:08
阅读次数:
155
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理。会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的。自从发现了rem这个好东西,并且听了一位有经验同事的讲解,顿时豁然开朗,现在对于手机端的页面开发,可以说胸中有一点丘壑了。r ...
分类:
移动开发 时间:
2016-04-21 15:11:47
阅读次数:
236
写在前面
Flexbox即弹性盒子模型,它在css中的定义和标记非常简单,通过媒体查询的方式就可适配和响应变化,不需要清除浮动,不需要使用额外的框架,也不需要使用大量冗余的代码来实现栅格布局。
Flexbox究竟是什么简单地说,我们可以在一个flex容器中标记一些flex子元素,通过css来定义布局。flexbox有很多属性来定义布局。
flex-direction: 通过这个属性,我们能指定f...
分类:
其他好文 时间:
2016-04-21 11:55:49
阅读次数:
146
——1、html,css,javascript框架 ——2、一般开发响应式布局或者移动优先的项目可以优先考虑 优点 1、css开发版本(可以直接上手)和源码版本(可根据less 和sass变量和混合宏定制); 2、已配置媒体查询,适应手机、平板、pc; 3、文档详细,有忘记的样式或者效果马上可以在文 ...
分类:
其他好文 时间:
2016-04-20 17:49:36
阅读次数:
149
如何使用Media Queries媒体查询: (1)<head>里边 <link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)"> (2)style 里边 ...
分类:
移动开发 时间:
2016-04-20 13:38:19
阅读次数:
301
background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置 ...
分类:
Web程序 时间:
2016-04-20 11:09:14
阅读次数:
282
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 媒体查询包含了一个媒体类型和CSS3规范中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且当媒 ...
分类:
Web程序 时间:
2016-04-14 18:04:38
阅读次数:
190
随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在 w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用 ...
分类:
其他好文 时间:
2016-04-11 18:42:55
阅读次数:
142
详情请参考原网址:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries 备份文件:http://pan.baidu.com/s/1bpDL4Qz 格式大概如下 作用 “响应式设计(Responsive Design) ...
分类:
Web程序 时间:
2016-04-10 14:22:55
阅读次数:
145