Web 技术与响应式设计

Question

ETHAN MARCOTTE 的文章《响应式Web设计》讲述了在可伸缩的网页基础上使用 Media Query 来实现响应的响应式设计。 而本文试从前端角度整理了近年来可供实现 可伸缩基础 和 响应 的前端技术。

一、Media Query

<style>
    div {
        font-size:16px;
    }
    @media (min-width: 401px){
        div {
            font-size:32px;
        }
    }
</style>

<div>text</div>

http://jsdm.com/anon/paint/eiscz

Media query通过指定条件切换 CSS，对适配来说，Media query 可谓核武器一样的功能，但是滥用 Media query 将会导致 CSS 难以维护（如一些开发者将会为不同的尺寸的设备指定完全不同的两套或者几套CSS，这样的使用方式背离了响应式设计的哲学）。

二、流排版

<style>
  #container {
	font-size:0px;
  }

  #container div {
	display:inline-block;
	height:100px;
	width:100px;
	font-size: 20px;
	border: 1px solid #ccc;
  }
</style>

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div> 
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

http://jsdm.com/anon/paint/wPfmd

流排版是浏览器的基本排版方式，针对不同宽度的页面，流排版方式可以充分利用空间。inline-block 使得我们可以对块状元素像文字一样做流排版。

三、宽高最大最小值

<style>
    div {
        min-width:200px;
        max-width:300px;
        width:50%;
    }
</style>

<div>50%</div>

http://jsdm.com/anon/paint/xWkO6

宽高最大最小值是非常古老的浏览器特性，指定元素的可伸缩范围，可以避免元素被过度放大或缩小后失去表达作用

四、多栏

<style>
    div {
        column-width:300px;
    }
</style>

<div>text text text text text text text text text text text text 
text text text text text text text text text text text text text 
text text text text text text text text text text text text text 
text text text text text text text text text text text text text 
text text text text text text text text text text text text text 
text text text text text text text text text text text text text 
text text text text text text text text text text text text</div>

http://jsdm.com/anon/paint/wUYwK

多栏是CSS3的新特性，它是流排版的重要补充，可以避免过长的行造成阅读障碍。

五、可伸缩排版

<style>
    #container {
        display:flex;
    }
    #d1 {
        width:50px;
    }
    #d2 {
        flex:1;
    }
    #d3 {
        flex:2;
    }
</style>

<div id="container">
  <div id="d1">50px</div>
  <div id="d2">1x</div>
  <div id="d3">2x</div>
</div>

http://jsdm.com/anon/paint/CFIlC

可伸缩排版也是CSS3的新特性，它能允许一些元素自适应宽，按比例填满剩余宽度/高度。

六、相对单位

<style>
    div {
        width:20vw;
        height:20vw;
    }
</style>

<div>1/5</div>

http://jsdm.com/anon/paint/Xf6Wu

相对单位大约有%、em、rem、vw、wh、wmax、vmin七种，其中，%是相对父元素的尺寸，em和rem是文字相关， vw wh wmax vmin四种则根据可视区域变化。

七、图片集组

<img srcset="http://gw.alicdn.com/tps/i2/TB1oqcPIXXXXXXDXpXXdIns_XXX-1125-352.jpg_320x320 1x,
    http://gw.alicdn.com/tps/i2/TB1oqcPIXXXXXXDXpXXdIns_XXX-1125-352.jpg_640x640 2x">

http://jsdm.com/anon/paint/vN11x

图片集组是 img 标签的 srcset 和imageset，与其他技术不同，图片集组并不有助于适配屏幕分辨率，它用于适配不同屏幕像素密度（DPR）。

八、元素锁定宽高比

<style>
    div::before {
        content:" ";
        display:block;
        padding-bottom:56.25%;
        width:0;
        height:0;
    }
    div {
        width:auto;
        height:auto;
        position:relative;
		background: #eee;
    }
</style>

<div></div>

http://jsdm.com/anon/paint/yBpqg

元素锁定宽高比严格来说不能算是一门技术，它是利用伪元素、纵向padding等技术巧妙组合实现的，对需求适配的场景，它非常有用。

九、矢量图形图片

<img style="width:100%" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>"/>

http://jsdm.com/anon/paint/eerb5

矢量图片可以无限地缩放而不会失真，web 端矢量图形技术主要是 iconfont 和 svg。