整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
為切圖網 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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
