CSS核心内容整理 - (下)

  前言

    总体来讲CSS仍是比较容易掌握的,若是你愿意话大量的时间去实践,固然这更像是废话.CSS中有不少细节的东西,没有办法一一拿出来讲,因此在整个系列中我就挑出了我认为最重要的CSS内容,所谓最重要就是最经常使用的.

  正文

    原本最后这一部分想总结一下UI组件以及响应式设计,后来想了想仍是决定把UI组件这一部分去掉了.由于如今大多数的平常应用中,对于UI组件咱们更多的是依赖于各个框架,好比Bootstrap.因此我感受看Bootstrap的源码和Demo去了解UI组件更好,因此最后这一部分我想集中在响应式布局上.

    CSS中有一项被称为"媒体查询"的功能,能够检测出当前用户的屏幕大小.而后根据这个大小,提供或者补充对应的CSS样式以提供更好的体验.

响应式设计三大要素

1. 媒体查询 : 经过这种检测屏幕大小的特性,为不一样大小的设备提供不一样的CSS.
   

2. 流式布局 : 使用em以及百分比而不是px进行宽度的控制,让布局可以随屏幕设备大小而所发.

3. 弹性图片 : 使用相对单位确保图片的大小不会超出容器.
   

    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均可以.以上的内容仅仅是掌握一个响应式设计的主旨,大致上全部的这些框架也是依据这些原则去实现的.