CSS核心内容整理 - (下)
前言
整体来说CSS还是比较容易掌握的,如果你愿意话大量的时间去实践,当然这更像是废话.CSS中有很多细节的东西,没有办法一一拿出来说,所以在整个系列中我就挑出了我认为最重要的CSS内容,所谓最重要就是最常用的.
正文
本来最后这一部分想总结一下UI组件以及响应式设计,后来想了想还是决定把UI组件这一部分去掉了.因为现在大多数的日常应用中,对于UI组件我们更多的是依赖于各个框架,比如Bootstrap.所以我感觉看Bootstrap的源码和Demo去了解UI组件更好,所以最后这一部分我想集中在响应式布局上.
CSS中有一项被称为"媒体查询"的功能,可以检测出当前用户的屏幕大小.然后根据这个大小,提供或者补充对应的CSS样式以提供更好的体验.
响应式设计三大要素
媒体查询 : 通过这种检测屏幕大小的特性,为不同大小的设备提供不同的CSS.
流式布局 : 使用em以及百分比而不是px进行宽度的控制,让布局能够随屏幕设备大小而所发.
弹性图片 : 使用相对单位确保图片的大小不会超出容器.
1. 媒体查询
媒体查询在使用中是包裹具体的CSS规则,作为容器使用.即在某些条件下才会使其中的CSS生效.
@media print {
nav {
display: none;
}
}
当前页面进行打印时,隐藏nav标签的内容.通过将对应的CSS规则嵌套在@media中实现,但是媒体规则本身不支持嵌套.
@media screen and (max-width: 568px) {
.column {
float:left;
width: 90%;
}
}
当页面是通过屏幕显示,且最大宽度不超过568px时,就会将column样式的浮动设为left,同时将宽度设置为90%.
简单介绍一下媒体查询的类型以及特性:
all : 匹配全部设备.
print : 分页媒体以及打印模式.
screen: 匹配彩色计算机屏幕.
--------------------------------任意时刻应该只有一种设备类型--------------------------------
max-width 和 min-width : 匹配视窗的宽度,比如浏览器的宽度而不是屏幕宽度.
max-device-width 和 min-device-width : 匹配屏幕尺寸.
orientation : portrait || landscape : 匹配设备是横屏还是竖屏.
通过@media可以使用媒体查询规则,另一种方式则是使用<link>,尤其是CSS规则很多的情况下.
<link type="text/css" media="screen and (max-width:568px)" href="css/iphone_styles.css" />
有时移动设备的浏览器可能会自动缩放网页,造成我们的媒体查询失去所用,这时我们要认为的覆盖这种特性,很简单就可以实现.
<meta name="viewport" content="width=device-width; maximumscale=1.0" />
这个<meta>标签告诉浏览器按照屏幕宽度来显示网页，不要缩小网页。
2. 使用百分比优化平板和手机的布局
不管是手机还是平板,针对他们的布局肯定会和web桌面网站上的效果不一样.响应式布局的精髓就在于通过不同的CSS来调整同一个应用,使他不需要重新设计就可以在多种设备上运行.
所以对平板和手机的优化也需要media出力:
@media only screen and (max-width: 1000px) {
// 平板
}
@media only screen and (max-width:640px) {
// 手机
}
在里面将其中的页面组成部分设置不同的百分比宽度,同时将水平的布局尽可能改为垂直布局.大多数时候我们要取消布局中的浮动,因为不再需要水平的结构,最重要的结构是上下布局.
如果有图片为它加上类似如下的样式,防止它的大小超出容器.
img {max-width:100%;}
这一部分的内容,可能相对来讲比较空旷,坦白说如果我要做一个项目不会选择自己写这些,而是找一个响应式的CSS框架去完成,bootsrap或者jQuery Mobile都可以.以上的内容仅仅是掌握一个响应式设计的主旨,大体上所有的这些框架也是依据这些原则去实现的.