响应式web设计-原创手记-慕课网

固定宽度布局的缺点

我们经常可以看到固定宽度的布局.例如960px的页面在笔记本上可能显示刚刚好,但是在高分辨率的显示器上两侧就会出现留白,可是我们现在有了智能手机.手机浏览器会将一个标准页面缩放到与视口(即:设备可视区域)恰好匹配.然后用户可以选择在自己感兴趣的内容上放大浏览,这样就导致了用户体验非常糟糕!(想象一下不停的点击放大滑动然后缩小,更可恶的是如果误点击了一个链接).响应式web设计的核心是移动优先.

在使用CSS3属性的时候需要注意浏览器前缀,并且将不带有前缀的添加到最后,这样如果该属性可用就会覆盖之前的声明.

百分比宽度的计算

百分比宽度 = 目标元素宽度 / 上下文元素宽度,例如我们有以下的固定宽度的布局:

<div id="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="">link1</a></li>
        <li><a href="">link2</a></li>
      </ul>
    </nav>
  </header>
  <aside>
    <p>this is aside</p>
  </aside>
  <article>
    <p>this is content</p>
  </article>
  <footer>
    <p>this is footer</p>
  </footer>
</div>
<style>
#wrapper{
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}
nav{
  width: 940px;
  margin: 26px 0 0 -10px;
  padding: 25px 10px 0 10px;
}
nav ul li{
  display: inline-block;
}
aside{
  border: none;
  border-right: #e8e8e8 solid 2px;
  margin: 58px 10px 0 10px;
  padding-right: 10px;
  float: left;
  width: 220px;
}
article{
  margin: 58px 10px 0 0;
  float: right;
  width: 698px;    
}
footer{
  float: left;
  margin: 20px 10px 0 10px;
  clear: both;
  width: 940px;
}
</style>

根据经验,我们将最外层的#wrapper的宽度设置为96%,那么nav的宽度应该设置多少?我们用940/960 = 97.91666666666666%,所谓的上下文元素就是被参照的元素,我们也可以简单理解为具有特定宽度的父元素或者祖宗元素.

使用em替代像素

几年前,使用em替代px主要是为了实现文字缩放.em的实际大小是相对于上下文字体而言的.如果给body的font-size设置为100%,其他文字单位都使用相对单位em,那些文字都将受到body上初始声明的影响.现代浏览器中默认文字大小是16px,因此在body中声明以下的3条css等效:

body{
  font-size: 100%;
  font-size: 16px;
  font-size: 1em;
}

弹性图片

在IE7+实现图片随流式布局自动缩放非常简单:

img{
  max-width: 100%;
}

同理,该css属性还可以拓展到<object>,<video>,<embed>等其他多媒体元素

CSS3实用技巧

类似报纸排版的多栏布局column-count
文字换行word-wrap:break-word,需要给外层容器添加此属性,中间内容将自动换行(不会生成水平滚动条)

水平导航的最佳实践:

<nav>
  <ul>
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
    <li><a href="">link 3</a></li>
    <li><a href="">link 4</a></li>
    <li><a href="">link 5</a></li>
  </ul>
</nav>
<style>
  nav{
    display: table;
  }
  nav ul{
    display: table-row;
  }
  nav ul li{
    display: table-cell;
  }
  nav ul li:first-child{
    text-align: left;
  }
  nav ul li:last-child{
    text-align: right;
  }
</style>

首字下沉效果.得益于伪元素选择器.::first-letter,同理::first-line用于选择首行.

元素的透明度

说道透明度我们一般会想到opacity这个属性.但是给一个容器设置了透明度后,它的内容也就变得透明了,因此我们可以使用透明的背景色:rgba或者hsla

使用CSS3创作绚丽的效果 模拟书籍页边距的光晕效果

使用多重内阴影:

box-shadow:inset 0 0 30px hsl(0,0%,0%),
          inset 0 0 70px hsla(0,97%,53%,1);

文字浮雕

text-shadow:0px 1px #fff,
            4px 4px 0px #dad7d7;

过渡动画

除了常见的transition:all 1s ease 0s外我们也可以为不同的属性指定不同的过渡(也就是说步调可以任意),例如:

button{
  transition-property: border,color,text-shadow;
  transition-duration: 2s,3s,8s;
}

以上的效果是2s完成border,3s完成color,8s完成text-shadow.

CSS3针对表单的伪类选择器

input:required,必填表单域
input:focus:invalid,处于焦点并输入了非法值的表单域,同理,有input:focus:valid

使用上面的3个选择器可以制作响应式的表单:

input:required{
  border: 1px solid rgba(253, 8, 8, 0.3);
}
input:focus:invalid{
  background: url('error.png') no-repeat right;
}
input:focus:valid{
  background: url('ok.png') no-repeat right;
}

html5新特性 自动联想词

<div>
  <label for="username">用户名</label>
  <input type="text" id="username" list="usernames">
  <datalist id="usernames">
    <select>
      <option value="a"></option>
      <option value="aa"></option>
      <option value="abc"></option>
      <option value="bb"></option>
    </select>
  </datalist>
</div>

以上的代码当我们输入字符的时候会自动从下面的datalist标签中进行筛选.

不支持html的浏览器的渐进增强

<script src="js/jquery-1.7.1.js"></script>
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//加载补丁
$.webshims.polyfill();
</script>