怎樣給移動端頁面設(shè)置不同于PC端的樣式？

更新時間:2021-01-21 來源:黑馬程序員瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

在實(shí)際開發(fā)中，移動Web頁面的設(shè)計(jì)風(fēng)格更接近App（手機(jī)應(yīng)用），而不是傳統(tǒng)的網(wǎng)頁。為了有更好的用戶體驗(yàn)，我們可以給移動Web頁面設(shè)置一些特殊樣式。下面為列舉在移動Web開發(fā)中經(jīng)常會設(shè)置的特殊樣式，具體如表1所示。

表1 移動端特殊樣式

移動端特殊樣式代碼

需要注意的是，上述樣式是非標(biāo)準(zhǔn)的，因此加上了私有前綴“-webkit-”，該前綴在WebKit和Blink內(nèi)核的瀏覽器中有效，適用于Chrome瀏覽器和大多數(shù)移動端瀏覽器。

為了讓讀者更好地理解，下面我們通過例2-5進(jìn)行案例演示。

【例2-5】

（1）創(chuàng)建C:\web\chapter02\demo05.html文件，具體代碼如下。

 <!DOCTYPE html>
   <html>
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>特殊樣式</title>
    <style>
     a {
      -webkit-tap-highlight-color: transparent;
    }
    input {
     -webkit-appearance: none;
    }
   </style>
  </head>
   <body>
   <a href="#">超鏈接</a>
   <input type="button" value="按鈕">
  </body>
  </html>

上述代碼中，第8~10行代碼設(shè)置a標(biāo)簽樣式中的-webkit-tap-highlight-color的值為transparent，表示當(dāng)單擊這個超鏈接時，清除單擊高亮效果；第11~13行代碼設(shè)置按鈕樣式中的-webkit-appearance的值為none，用來去除按鈕的原生樣式。

（2）在瀏覽器中打開demo05.html，運(yùn)行結(jié)果如圖1所示。

移動端設(shè)置特殊樣式