用HTML5實現網站在windows8中貼靠的方法_HTML5教程
      
編輯Tag賺U幣
      




      

      推薦：HTML5之HTML元素擴展(下)—增強的Form表單元素值得關注
      在HTML5增強的元素中，最值得關注的就是表單元素;在HTML5中，表單已經做了重大的修整，一些以前需要通過JavaScript編碼實現的功能現在無需編碼就可輕松實現,感興趣的朋友可以詳細了解下，或許對你有所幫助
      

       首先來了解一下windows 8 的貼靠，在windows 8 中的Metro應用可以將屏幕很好的進行分割.如下圖
      

       
      

      

      讓用戶在使用時可以非常方便的切換。 系統對貼靠也是有硬性規定的。最多兩個屏幕，而且是一個大的一個小的。并且小屏的寬度是固定的 320像素。
      

      所以當用戶把網站貼成小屏幕，這個時候頁面默認是等比例縮小的。如下圖:
      

      

      那么怎么很好的解決這樣的一個問題呢？讓網站在windows 8的貼靠小屏幕下顯示非常友好的效果呢？下面我有一個簡單的示例
      

      如圖 一個非常簡單的并且傳統的頁面，包括橫向排列的導航，內容等.
      

      

      而傳統的代碼也是這樣

      復制代碼 代碼如下:www.wf0088.com

      <!DOCTYPE html> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
          <title></title> 
          <style> 
              .nav { 
                  padding: 5px 0px 5px 0px; 
                  margin: 0px; 
                  width: 100%; 
                  list-style-type: none; 
                  background-color: #cddcd6; 
                  height: 28px; 
              } 
        
                  .nav li { 
                      margin: 0px 1px 0px 0px; 
                      float: left; 
                      background-color: #0094ff; 
                      padding: 5px 10px 5px 10px; 
                  } 
        
              .dvItem { 
                  width: 100%; 
                  height: 400px; 
                  background-color: #b6ff00; 
                  clear: both; 
              } 
        
              .main { 
                  width: 960px; 
                  margin: 0px auto 0px auto; 
              } 
          </style> 
      </head> 
      <body> 
          <div class="main"> 
              <ul class="nav"> 
                  <li>Home</li> 
                  <li>Item1</li> 
                  <li>Item2</li> 
                  <li>Item3</li> 
                  <li>Item4</li> 
              </ul> 
              <div class="dvItem"> 
              </div> 
          </div> 
      </body> 
      </html> 
      

      　　這樣的頁面在貼靠效果就是縮小的如圖:
      

      

      如何修改呢? 在傳統的這樣頁面中我們只需要根據windows 8 的貼靠特性編寫一份CSS 讓我們頁面以320像素的寬度進行布局和顯示即可
      

      實現代碼如下: 在原有頁面中新加入以下樣式代碼


      復制代碼 代碼如下:www.wf0088.com

      @media screen and (max-width: 320px) { 
          @-ms-viewport { width: 320px; } 
       
          .nav { 
              padding: 5px 0px 5px 0px; 
              margin: 0px; 
              width: 100%;  background-color:#fff; 
          } 
       
              .nav li { 
                  width: 300px; 
                  clear: both; 
                  margin: 0px 0px 1px 0px; 
                  background-color: #0094ff; 
                  padding: 5px 0px 5px 0px; 
              } 
       
          .dvItem { 
              width: 95%; 
              height: 600px; 
              background-color: #ff00a4; 
              clear: both; 
          } 
       
          .main { 
              width: 320px; 
              margin: 0px auto 0px auto; 
          } 
      }

      　　在全屏瀏覽和傳統瀏覽下還是沒有任何區別的。
      

      區別就在于將他貼靠為小屏幕 如下圖 顯示效果是不是很明顯呢。
      

      

      本示例代碼下載/Files/risk/Index.rar

      

            
      分享：html5 canvas里繪制橢圓并保持線條粗細均勻的技巧
      Canvas里繪制橢圓是一個很常見的需求，但是目前大多數瀏覽器還沒有實現該方法，因此經常會使用arc或者arcTo方法結合scale變形來繪制橢圓，感興趣的朋友可以了解下，希望可以幫助到你們
      


      

      



      


      來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22


      

      



      


      



      相關HTML5教程：