Upgrade to Pro — share decks privately, control downloads, hide ads and more …

可遇见的WEB

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

 可遇见的WEB

Avatar for time zhong

time zhong

March 14, 2014
Tweet

More Decks by time zhong

Other Decks in Technology

Transcript

  1. VIEWPORT PERCENTAGE UNITS 1vw=1% of viewport width ! 1vh=1% of

    viewport height ! ! 1vmin=min(1vw,1vh) ! 1vmax=max(1vw,1vh)
  2. css: ! .layout-header{height:10vh;font-size:4vw;} .layout-body{height:80vh;} .layout-footer{height:10vh;} .col-aside{float:left;height:80vh;width:30vw;} .col-main{float:left;height:80vh;width:70vw;} html: ! <div

    class="layout-header">header</div> <div class="layout-body clearfix"> <div class="col-aside"></div> <div class="col-main"></div> </div> <div class="layout-footer"></div> aside footer main DEMO
  3. 当然远不⽌止这些... calc() datalist data binding Geolocation API Page Visibility API

    Client-side Download Screen Orientation API Access Native Hardware ! …