最近開發發現一個很有趣的問題 就是我如果給一個元素加上一個像素的 border 在不同的分辨率的情況下顯示的不同 在高清屏幕（尤其是ios 嘍 不鄙視國產） 據說在6plus下會變成3px 這個我就不知道了 因為我沒有。。。
那么我們換個單位行不行？ 因為移動端不用px來做 啊 對不起 你換了rem 或者em都不行（我只是測試了這兩個單位）
廢話不多說了 說一下解決方案
看一下我們老大 淘寶的解決方案 簡單粗暴 更實用啊 
這個圖片我覺得夠大了 對就是用了一個寬度為1px的div來模擬的 然后我覺得這樣有點浪費div的資源啊 於是我繼續百度ing。。。
於是有找到了 利用定位 和after屬性來做的例子
<!doctype html> <html lang="en"> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta charset="UTF-8"> <title>0.5 border</title> <style type="text/css"> *{margin: 0;padding: 0;-webkit-box-sizing:border-box;} ul{ position: relative; } li{ height: 60px; line-height: 60px; padding-left: 10px; position: relative; font-size: 20px; } li:after{ content: ""; display: block; position: absolute; left: -50%; width: 200%; height: 1px; background: #ededed; -webkit-transform:scale(0.5); } </style> </head> <body> <ul> <li>list-item1</li> <li>list-item2</li> <li>list-item3</li> <li>list-item4</li> <li>list-item5</li> <li>list-item6</li> <li>list-item7</li> <li>list-item8</li> </ul> </body> </html>
哎呀 這又是一種解決方案。。 那么誰的更好一點我就不多說了 定位這個東西還是少用一點為好。。。 分不清哪一個更好但是知道都可以解決問題 至於為什么產生這樣的問題 建議百度幾篇不錯的文章來看一下 我基本都說代碼 因為我怕誤人子弟。。。 如果覺得那里不對歡迎留言。。。。