精品人人妻人人澡人人爽人人,无码国产69精品久久久久APP,А√天堂网WWW在线搜索,亚洲精品白浆高清久久久久久

服務(wù)項目:網(wǎng)站建設(shè)、仿站、程序開發(fā)、APP開發(fā)設(shè)計、移動網(wǎng)站開發(fā)設(shè)計、企業(yè)網(wǎng)站設(shè)計、電子商務(wù)網(wǎng)站開發(fā)、網(wǎng)站維護、網(wǎng)站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
四川???萍加邢薰?></a></div>
                    <div   id=四川???萍加邢薰? title=
四川浚??萍加邢薰?(開發(fā)設(shè)計官網(wǎng))TEL : 15308000360 / QQ : 38585404

您的位置:首頁 > 技術(shù)經(jīng)驗 > 前端開發(fā) > 正文

移動網(wǎng)頁適配的界面規(guī)范
技術(shù)支持服務(wù)電話:15308000360 【7x24提供運維服務(wù),解決各類系統(tǒng)/軟硬件疑難技術(shù)問題】

橫豎屏切換

豎屏不限定寬高、間距,保證橫屏看著正常。

  • 寬:快速查看整個頁面,不會因?qū)挾瘸^屏幕范圍而可以左右拖動。

    頁面不會因頁面超出屏幕范圍而左右拖動。不會因圖片限制寬度而有空白區(qū)域。(使用合理的圖片對齊方式)
  • 高:模塊不會因為限定的高度而又內(nèi)容超出模塊范圍。

  • 間距:頁面中沒有太多因屏幕變寬而增加的無效空白區(qū)域 。

  • 浮動:不能出現(xiàn)因浮動導(dǎo)致的錯版。

網(wǎng)站主題色

  • 網(wǎng)站采用單色系配色,部分區(qū)域可根據(jù)pc站采用多色。

  • 標(biāo)題左側(cè)和列表單條信息左側(cè),可用圓形點、方形點,其顏色與pc站上的設(shè)計保持一致。

  • 不同內(nèi)容顏色要有區(qū)分度。如標(biāo)題、內(nèi)容、時間、作者等

標(biāo)題使用黑色(#000, #333),內(nèi)容、時間采用灰色(#666, #999),作者使用鏈接色(#00f)。

對齊方式

  • 按模塊規(guī)律使用統(tǒng)一對齊方式,類似功能模塊的

  • 橫豎屏切換,按鈕、圖片使用一致的對齊方式。

  • 列表模塊一般居左,視情況在其右側(cè)添加“more”鏈接,標(biāo)題和more鏈接分別使用有對比的顏色。

列表模塊下方more鏈接,一般居中。

  • 垂直居中基于表格布局實現(xiàn)。

間距

  • 各模塊間使用統(tǒng)一的間距,可采用10px、20px,達到視覺上的基本統(tǒng)一。

有時候line-height會產(chǎn)生一定的間距,如3px,應(yīng)該在模塊間中減掉。

  • 頁面采用統(tǒng)一的左右間距,可采用5px、10px,不推薦使用8px(計算麻煩)。(圖片輪播、標(biāo)題欄等視情況可頂頭)。

  • 圖片列表采用5px~10px,將圖片和文字隔開,并將圖片和文字的上下側(cè)對齊。

間隔線

  • 重復(fù)性或類似內(nèi)容中間區(qū)分度不高的使用間隔線條進行區(qū)分。常見形式:新聞列表、圖片混排列表

  • 列表間隔線常用灰色,標(biāo)題下側(cè)間隔下可用灰色或網(wǎng)站主題(多為青藍色)

清除浮動

  • 使用浮動進行布局的時候,務(wù)必要清除浮動,不能用設(shè)置高度來代替。

  • 使用overflow:hidden清除浮動時,在安卓、蘋果手機上檢查保證沒有被遮住的情況。

  • 浮動換行,使用float做左邊固定右邊自適應(yīng)的效果時,保證在UC、QQ瀏覽器上不出現(xiàn)換行的情況。

列表畫廊

  • 新聞標(biāo)題、圖片畫廊多余6個的,都可以考慮隱藏。

  • 列表類豎屏1列,橫屏可適當(dāng)顯示2列

  • 畫廊類豎屏2列,橫屏可適當(dāng)顯示3~4列

文字截取

  • 列表單條一般做單行截取,可根據(jù)pc站的顯示效果不做截取。

列表單條中鏈接與時間混排的,保證在UC、QQ瀏覽器上不遮擋、不錯版截取

  • 標(biāo)題描述列表時,標(biāo)題可采用不截取或單行截取,描述可采用兩行或三行截取。

  • 圖文混排時,標(biāo)題可采用不截取或單行截取,描述可采用兩行或三行截取,要保證圖片下側(cè)與描述下側(cè)對齊。保證在UC、QQ瀏覽器上不出現(xiàn)遮擋的情況。

js交互

  • 確保js交互方式正常。

  • 確保可點擊范圍,保證32~44px的點擊范圍。

  • 刪除百度分享、“Bshare”等第三方模塊。

表單區(qū)域

  • 搜索區(qū)域內(nèi)的輸入框和搜索按鈕需占滿整個屏幕,即橫豎屏切換時顯示效果一致。

  • 布局類的表單樣式在蘋果、安卓手機顯示效果要一致。

  • 搜索文本框需要有明顯的文字提示,不出現(xiàn)大的空白。

  • 注冊登錄區(qū)域的表單,需要有l(wèi)abel性質(zhì)的文字,若沒有,就需要在文本輸入框中加上placeholder的提示性文字。

彈出窗口

采用左右對齊、對齊的方式,

可用固定寬度,如300px;可用不固定寬,一般距離屏幕左右兩側(cè)10px、15px

在手機上保證進行文字輸入,彈出窗口不受影響。

頁碼

可點擊區(qū)域,間距

大項目可單獨制作 上一頁 1 / 32 下一頁 經(jīng)典的頁面控件

邊框

input { outline: none; //清除input外邊框 -webkit-appearance: none; // 清除iPhone上默認(rèn)的樣式,如圓角(待確認(rèn)) }

/* 保證安卓手機和蘋果手機樣式一致 */
.inputtext{

    display: block;  //變成塊元素消除默認(rèn)的上下外邊距

    width: 100%; //特定的時候用

    height: 30px; //嚴(yán)格要求的時候用

    //需要設(shè)置  `邊距、邊框、背景、圓角、行高`

    padding: 0;

    background: #e1e1e1;

    border-radius: 5px 0 0 5px; //

    border: none;

    line-height: 30px; //與高度保持一致

 }



上一篇:jQuery 3.0:新一代的 jQuery
下一篇:IE11很是生猛:前端們應(yīng)該關(guān)注最近瀏覽器市場占有率

相關(guān)熱詞搜索:移動網(wǎng)頁
亚洲精品美女久久久久99| 啊灬啊灬啊灬快灬高潮少妇| 美国一区二区三区无码视频| 又粗又猛又黄又爽无遮挡| 欧美另类精品XXXX人妖| 欧美人与性动交CCOO|