整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          響應式web中的表格處理我是這樣弄的

          為切圖網 qietu.com 的一名web前端工程師,我在為客戶合作的項目做響應式開發的時候,通過css3 media query多媒體查詢技術進行一些重新的排版,可以很輕松完成網站的響應式,也會碰到一些小麻煩,其中典型的例子就是table表格的響應式開發了。

          相信 Web 開發人員都碰到過顯示不全的情況,我是這么解決的,希望能幫到你。

          一:隱藏不重要數據列

          處理前:

          處理后:

          實現方法:

          01
          02
          03
          04
          05
          06
          07
          08
          09
          10
          11
          12
          13
          @media only screen and (max-width: 800px) {
          table td:nth-child(2),
          table th:nth-child(2) {display: none;}
          }
          @media only screen and (max-width: 640px) {
          table td:nth-child(4),
          table th:nth-child(4),
          table td:nth-child(7),
          table th:nth-child(7),
          table td:nth-child(8),
          th:nth-child(8){display: none;}
          }

          以用戶角度思考,每個人對數據的認知不同,或許你隱藏的數據對于他卻是很重要的。所以這種方法不推薦。

          二:固定首列,剩余列橫向滾動

          處理前:

          處理后:

          實現方法:將橫向的表頭利用 CSS 改為縱向顯示并固定位置,其余內容部分不變并出現橫向滾動條。tbody 上應用 white-space:nowrap; tbody tr 下應用 display:inline-block;

          三:多列橫向變2列縱向

          處理前:

          處理后:

          實現方法:

          <thead>定位隱藏,<td>變塊元素,并綁定對應<th>列名,然后用偽元素的content:attr(data-th)實現<th>

          插件推薦:

          Responsive tables

          如果你是用的 Bootstrap 3,那么推薦用Responsive tables

          Demo:http://gergeo.se/RWD-Table-Patterns/#demo

          tablesaw

          個人覺得這款插件功能很強大,滿足各種需求

          文/丁向明

          做一個有博客的web前端自媒體人,專注web前端開發,關注用戶體驗,加我qq/微信交流:6135833

          http://dingxiangming.com

          前2篇文章講了《為什么375×667是移動端原型設計的最佳分辨率如何設置手機APP原型尺寸

          所謂的APP原型適配手機,是指用手機瀏打開原型頁面的時候,橫豎都剛好撐滿屏幕。當然如果頁面比較長,高度超過一屏是沒問題的。

          如果你的原型是你手機屏幕的邏輯分辨率

          比如你的原型是375×667,手機是iPhone6/6s/7,那在手機上查看的時候無需縮放,默認撐滿屏幕。

          如果你的原型是360×640,而手機是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機型,也是一樣的。

          如果你的原型不是你手機屏幕的邏輯分辨率

          比如你的原型是375×667,而你的手機是華為p8,1080×1920。理論上來說無法完美適配APP中所有的頁面。但是除了有下導航的頁面一般都沒問題。

          設置生成原型的手機參數

          你需要在Axure生成HTML的時候設置一下手機上如何展示原型。

          請勾選包含視口標簽。瀏覽器顯示網頁,默認是按照網頁自身分辨率來展示的。勾選了此項之后,里面的區域按照下方規則來處理展示。

          寬,使用默認的device-width即可。

          高,一般不需要填,因為是根據寬度來決定的。

          最小縮放倍數和最大縮放倍數,一般不需要填。

          允許用戶縮放,一般填寫no。

          初始縮放倍數怎么填

          具體規則是原型頁面的橫向分辨率x初始縮放倍數xDPR參數=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應位置。

          而這里的DPR參數(devicePixelRatio),代表的是設備像素和CSS像素的比例,下方的chrome網頁調試中也揭示了這一點。

          所以上面的華為p8應該設置為0.96,你可以根據機型去百度搜索對應的DPR參數是多少。

          查看原型

          在電腦上看

          通過chrome-視圖-開發者-開發者工具,切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果,以方面了解是不是需要單獨適配。

          當然safari的菜單欄-開發-響應者模式也可以。

          在手機上看

          請用手機瀏覽器打開該網頁,請用手機瀏覽器打開該網頁,最好生成到桌面查看效果。比如我設計的原型。

          建議豎向減掉20px,因為Axure默認不顯示頂部狀態欄。

          總結

          建議你們下次設計APP原型的時候按照通用分辨率375×667來設置,次選方法是按照自己手機的邏輯分辨率來定尺寸。。

          如果想明白為什么要這樣設置,可以去搜索viewport和邏輯分辨率等概念。當然就使用而言,PM無需了解這些知識。

          至于如何把原型放到手機上面查看,我們下次再講。

          調查了身邊五六年經驗以上的幾個前端同學和同事,盡然發現絕大部分人都不知道,當然,在看到這個文章之前,我也不知道這個,平時雖然都一直在做web前端開發,但真沒涉及到這塊,或者說涉及到了,也解決了,但是還真沒探究過這個問題,你是否躺槍了呢?

          這是一個很讓人困惑的CSS特征,我之前也談到過它。我們大家都知道,當按百分比設定一個元素的寬度時,它是相對于父容器的寬度計算的,但是,對于一些表示豎向距離的屬性,例如padding-top,padding-bottom,margin-top,margin-bottom等,當按百分比設定它們時,依據的也是父容器的寬度,而不是高度。

          下面是一個實例演示代碼,你可以調整容器的寬度,但你會發現,黃塊塊的padding-bottom的距離也會隨之寬度而變大或變小。

          HTML代碼

          <div class="wrapper" id="w">

          <div class="box" id="b"></div>

          </div>

          <input type="range" min="120" max="400" value="400" class="range" id="r">

          <output>寬度是: <span id="op">400px</span></output>

          <output>黃塊塊的Padding bottom是:<br><span id="op2">10%</span></output>

          CSS代碼

          body {

          font-family: Arial, sans-serif;

          padding-top: 30px;

          text-align: center;

          }

          .wrapper {

          width: 400px;

          margin: 0 auto;

          border: solid 1px black;

          }

          .box {

          width: 100px;

          height: 100px;

          background: gold;

          margin-left: auto;

          margin-right: auto;

          padding-top: 10%;

          padding-bottom: 10%;

          margin-bottom: 5%;

          }

          .range {

          display: block;

          margin: 20px auto;

          }

          output {

          text-align: center;

          display: block;

          font-weight: bold;

          padding-bottom: 20px;

          }

          output span {

          font-weight: normal;

          }

          上面的代碼中,我們對內部子元素聲明了3個豎向的距離,都是百分比形式。當移動滑塊時,我們的js代碼只需修改了容器的寬度。但是,這個這三個屬性高度都跟隨著變化,可以看出,它們的百分比計算是基于容器的寬度,而不是高度的。

          切圖網致力于web前端技術開發,關注用戶體驗,關注移動web前端,響應式,微場景等技術,如果你對此感興趣請加公眾微信賬號:qietuwang


          主站蜘蛛池模板: 国产在线观看一区精品 | 自慰无码一区二区三区| 国产精品高清一区二区三区| 亚洲精品色播一区二区| 亚洲无线码在线一区观看| 国产一区二区三区免费看| 亲子乱av一区区三区40岁| 久久久综合亚洲色一区二区三区 | 国内自拍视频一区二区三区 | 成人h动漫精品一区二区无码| 无码人妻AⅤ一区二区三区| 香蕉视频一区二区| 一区二区日韩国产精品| 免费国产在线精品一区| 国产婷婷色一区二区三区深爱网 | 成人毛片一区二区| 亚洲中文字幕久久久一区| 亚洲.国产.欧美一区二区三区| 欧美日韩精品一区二区在线视频 | 综合久久一区二区三区 | 久久99精品免费一区二区| 一区二区3区免费视频| 天天爽夜夜爽人人爽一区二区 | 精品无码一区二区三区亚洲桃色| 亚洲综合色自拍一区| 国产suv精品一区二区33| 国产精品丝袜一区二区三区| 久久高清一区二区三区| 乱色精品无码一区二区国产盗| 色窝窝无码一区二区三区色欲| 无码人妻精品一区二区三 | 精品久久国产一区二区三区香蕉| 精品不卡一区中文字幕| 精品人妻一区二区三区毛片| 成人国内精品久久久久一区 | 色噜噜狠狠一区二区三区| 免费一本色道久久一区| 国产在线视频一区二区三区| 国产丝袜一区二区三区在线观看 | 亚洲AV成人精品日韩一区18p| 精品视频一区二区三区|