『壹』 前端自適應布局怎麼解決1px的問題
不知道你問的是解決什麼1px的問題，如果是解決1px的高度問題， 那就加scaleY。
『貳』 前端開發怎麼解決1px bug
你可以使用AndroidService。Service翻譯成中文是服務，熟悉Windows系統一定很熟悉了。Android里的Service跟Windows里的Service功能差不多，就是一個不可見的進程在後台執行，避免被用戶誤關閉。因為Android在某些情況下會自動關閉非前台顯示的Activity,所以如果要讓一個功能在後台一直執行，不被Android系統關閉，比如說鬧鍾、後台播放音樂，就必須使用Service。開發音樂播放器的時候如果沒用Service,也可以後台播放，別以為Service沒什麼用，經過一段時間後就會發現，沒用Service的播放器在播放一段時間後會被系統自動關閉。就算還在後台播放，過一段時間後打開播放器，再點播放按鈕，會出現兩種聲音。我想你是遇到了這個問題吧，你查一下資料學習一下AndroidService。相信你能研究出來的。希望幫到你。
『叄』 CSS - 移動端 1像素解決辦法
前言：在移動端web開發中，UI設計稿逗敗中設置邊框為1像素，前端在開發過程中如果出現border:1px，測試會發敗睜現在某些機型上，1px會比較粗，即是較經典的 移動端1px像素問題。
要處理這個問題，必須先補充一個知識點，就是設備的 物理像素[設備像素] & 邏輯像素[CSS像素]；
1.物理像素：
移動設備出廠時，不同設備自帶的不同像素，也稱硬體像素；
2.邏輯像素：
即css中記錄的像素。
在開發中，為什麼移動端CSS裡面寫了1px，實際上看起來比1px粗；了解設備物理像素和邏輯像素的同學應該很容易理解，其察指歲實這兩個px的含義其實是不一樣的，UI設計師要求的1px是指設備的物理像素1px，而CSS里記錄的像素是邏輯像素，它們之間存在一個比例關系，通常可以用 javascript 中的 window.devicePixelRatio 來獲取，也可以用媒體查詢的 -webkit-min-device-pixel-ratio 來獲取。當然，比例多少與設備相關。
在手機上border無法達到我們想要的效果。這是因為 devicePixelRatio 特性導致，iPhone的 devicePixelRatio==2，而 border-width: 1px; 描述的是設備獨立像素，所以，border被放大到物理像素2px顯示，在iPhone上就顯得較粗。
● 用::after和::befor,設置border-bottom：1px solid #000,然後在縮放-webkit-transform: scaleY(0.5);可以實現兩根邊線的需求
● 用::after設置border：1px solid #000; width:200%; height:200%,然後再縮放scaleY(0.5); 優點可以實現圓角，京東就是這么實現的，缺點是按鈕添加active比較麻煩。
『肆』 手機前端，我寫的是border：1px；但是在手機上顯示不止1像素。
在<head></head>之間設置下<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
兼容性問題，某個元素默認就有1px的border，或者有1px的outline，將各元素的base屬性border與outline設為0；
<style>
img{border:0px solid #ddd;outline:none;}
</style>
img{}
『伍』 前端解析度適配
現在手機屏大小不一，而且屏幕硬體性能也各不相同，一般的UI設計都是基於特定機型畫設計搞件的，常見的是基於iPhone6的解析度設計2倍圖，以iPhone6為例，屏幕物理像素寬度是750，網頁寬度為375PX。開發中還要根據不同手機留出設計餘量，因為不同解析度的手機顯示時會有拉伸位移。
網上也有一些方案，處理高清屏適配方案，但一般也只把DPR適配到2，彩用所有長度單位放大2位，網頁整體縮放50%的的做法，比如ant-mobile就支持這種方式，它可以定義一個less常量「@hd」來定義CSS中使用的基礎單位大小，但是這種方式在遇到網頁實際寬度大於375的設備時，還是不能1：1的還源UI設計稿。
我個人在項目中採用的是更復雜的實現方式，可以實現適配DPR大於2的手機屏，並接近100%的還源UI設計稿。具體的適配技術各家大同小異，這里不再細說，我只給出我自己的適配方案。
同大多數適配方法一樣，通過 rem 設計一個基礎的大小單位 ，做為整個頁面的基礎單位，再根據屏幕物理DPR結合屏寬計算這個單位的大小，
基礎單位 = 屏幕DPR * 網頁寬度 / 375（設計稿基準為375）
網頁縮放值 = 1 / 屏幕DPR
比如我的方案是把rem設為10px 再乘以「基礎單位」，這樣在設置一個設計稿上14號字的時候，就寫 1.4rem就可以了。另外編寫頁面布局時，也用這個計算出來的相對單位，這樣可以做到不管什麼樣的屏幕，UI設計搞都不會因寬度變化而變形。另外，如果使用ant-mobile這樣的支持高清方案的UI中間件，直接在配置中把它的LESS常量 「@hd」設置 為 「0.1rem」就可以了。
另外還有一個小的福利，就是在這個方案下，當你想畫出「1物理像素」的細邊框時，直接用 「1px」，就可以了，因為在這個方案下，1px對應的是一個物理像素。
下面給出我實踐中使用的適配代碼：(這是直接放在HTML文件中的版本）
//計算屏幕比例並設置html的font-size
/**
將html字型大小設置為10個設計像素（一個基準系數，即rem為10 設計稿像素）
設計一個縮放系數，以應對可能出現的適配高清屏要求
*/
( function () {
/**初始化方法
* _standard 設計稿對應的解析度
* base_DPR 設定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得當前設備DPR
var dpr = window. devicePixelRatio || 1;
//如果設定了默認最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//設定縮放視圖比例
var scale = 1 / dpr;
//設直視圖縮放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得當前設備寬度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//標定原稿設計基準值 當前稿件設計寬度為 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//設定基準單位
var base_value = 10;
//基準系數=設備寬度➗稿件基準寬度✖️設備DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//設置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();
『陸』 html5 canvas在img標簽的圖片上繪制矩形框、矩形框為1px時線條模糊問題
前端需要在後端返回的圖片集合里，根據提供的對角線坐標繪制矩形。矩形可能是多個。效果達到如下：
1、根據後端返回的圖片list，生成canvas畫布，
2、把圖片畫到canvas裡面，再根據後端返回的坐標，在canvas里畫矩形框。
此項目中，後端返回的坐標是基於縮略圖的，但是前端渲染在頁面上的圖片，會按寬為788px來顯示，所以坐標應該要按照比例來算。
真實的左上x點的計算方式為：真實寬 / 壓縮寬 * 壓縮x點
https://blog.csdn.net/qq_29594393/article/details/52849339
https://www.runoob.com/w3cnote/html5-canvas-intro.html
https://www.imooc.com/wenda/detail/551496
https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501
①畫矩形時，如果裡面的參數有不是整數的話，容易導致邊框粗細不一等問題。
②當矩形的邊框lineWidth設置為1px時候，會出現線條模糊的問題。
關於第②個問題的延申：
這是測試提給我的bug：
我的思路存在的問題：
首先，同樣是矩形的邊框我同樣設置的都是1px，不應該有的線條顏色深，有的顏色淡啊，排除了參數沒有取整的問題後，我懷疑了顏色red在畫布上的渲染問題，換成十六進制的同樣有問題。就在我一籌莫展的時候，我叫來了小夥伴，我說你看這線條顏色是不是不一樣，我開始懷疑我的眼神有問題。小夥伴說，你給線條整粗點看看這問題明顯嗎。我把邊框線條設置了2px，發現和1px的粗細是一樣的，並且顏色一樣了線條不模糊了。換成別的寬度，只要不是1px都沒有問題了。
思維的問題在於，我網路問題的描述有問題，我之前一直搜canvas繪制矩形線條深淺不一，我應該搜canvas矩形線條模糊。我排查問題的時候，固定思維模式覺得1px寫的沒錯，卻沒有嘗試排查。
關於這個問題的詳細解答與解決辦法：
canvas1px線條模糊
我的理解
canvas的線條畫法不一樣，canvas的每條線都有一條無限細的「中線」，線條的寬度是從中線向兩側延伸的，也就是說canvas繪制1px的時候，是中線向左右兩邊延申各取0.5，並不是向某一邊延申（如果只是往右延申就不再是問題了），此時問題出現了，計算機不允許出現小於1px的圖形，所以他做了一個折中的事：把這兩個像素都繪制了。所以，如此一來，本來1px的線條，就成了看起來2px寬的線條。
延申：
HTML 5 Canvas詳細講解 ———— 第二篇（清除canvas畫布上指定區域+橡皮擦功能實現；在畫布上平鋪指定圖片；在畫布上繪制文本；總結案例之刮刮樂功能實現）
『柒』 如何解決移動端Retina屏1px像素的問題
首先我們先聊下Retina屏的概念。
Retina: 一種新型高分前中辨率的顯示標准胡舉,又稱視網膜顯示屏。
在移動端開發中，UI設計稿中設置邊框為1px，前端在開發中如果出現border:1px,測試會發褲悔碧現在Retina屏機型中，1px會比較粗，即是經典的移動端1px像素問題。
比如iphone6的屏幕寬度為375px，設計師的視覺稿一般是750px，如果UI的border 1px,而前端實際開發的時候是不能採用1px border的，應該是1px/2。
參考高級前端進階
『捌』 前端面試題系列之-CSS及頁面布局篇
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。可以用簡單的方式滿足很多常見的復雜的布局需求。它的優勢在於開發人員只是聲明布局應該具有的行為，而不需要給出具體的實現方式。瀏覽器會負責完成實際的布局。該布局模型在主流瀏覽器中都得到了支持。
採用flex布局的元素，成為flex容器。它的所有子元素自動成為容器成員，稱為flex項目。常用的，設置到容器上的屬性有：
設置到項目上的屬性：
(Block Formatting Context)塊級格式化上下文。BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之也如此.並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
上述方法都可以創建BFC，但是會帶來一些負面影響：
::before是css3的寫法，:before是css2的寫法，用來設置對象前的內容
:before的兼容性要比::before好
更准確的說法
1、transition 是過渡，是樣式值的變化的過程，只有開始和結束；animation 其實也叫關鍵幀，通過和 keyframe 結合可以設置中間幀的一個狀態；
2、animation 配合 @keyframe 可以不觸發時間就觸發這個過程，而 transition 需要通過 hover 或者 js 事件來配合觸發；
3、animation 可以設置很多的屬性，比如循環次數，動畫結束的狀態等等，transition 只能觸發一次；
4、animation 可以結合 keyframe 設置每一幀，但是 transition 只有兩幀；
常規方法
不需要使用transform屬性時
webkit內核
參考鏈接：
CSS實現不換行/自動換行/文本超出隱藏顯示省略號
object-fit CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。這個CSS屬性可以達到最佳最完美的居中自動剪裁圖片的功能
@import規則一定要先於除了@charset的其他任何CSS規則。
不推薦使用@import:
因為瀏覽器的兼容的問題，不同瀏覽器有些標簽的默認值是不同的，如果沒有CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
偽元素和偽類的區別總結
css繼承指的是被包在內部的標簽將擁有外部標簽的樣式性，即子元素可以繼承父元素的屬性。
相關鏈接：
CSS 繼承，哪些屬性能繼承，哪些不能
z-index可以改變元素層疊順序，z-index較大的會疊加在z-index較小的元素上方。z-index值相同時，則按照文檔流順序，後面的覆蓋前邊的。
px就是pixel的縮寫，意為像素。px就是一張圖片最小的一個點，一張點陣圖就是千千萬萬的這樣的點構成的，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。注意css中的1px並不一定是物理像素的一個像素塊，需要根據DPR計算，對應多少物理像素塊
設備像素比：dpr = 物理像素 / 邏輯像素(px)，例如，iPhone6的dpr為2，物理像素750（x軸）,則它的邏輯像素為375
參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
css3新單位，相對於根元素html（網頁）的font-size，不會像em那樣，依賴於父元素的字體大小，而造成混亂。
css3新單位，viewpoint width的縮寫，視窗寬度，1vw等於視窗寬度的1%。舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
1英寸（inch）=2.54厘米（cm）
手機對角線的長度換算成英寸
屏幕橫向和縱向的像素點
1px即代表一個物理像素點/像素塊
PPI，是每英寸可以顯示的像素點的英文縮寫。如果說上面解析度是一個質量總量的概念，那麼，ppi就是密度的概念。我們可以通過屏幕的像素總量除以屏幕大小來計算屏幕的PPI，公式如下： a：橫向像素數量，b：縱向像素數量，c：屏幕尺寸（英寸）
1px與多少厘米之間是不能直接劃等號的，需要看解析度。
一般電腦的像素解析度是72ppi，計算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此時1px=0.0498cm，1cm=25px；
很多手機是300ppi，計算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此時1px=0.0119cm。
參考鏈接：
畫一條0.5px的線
在繼承性上：
一開始針對低版本的瀏覽器構建頁面，滿足最基本的功能，再針對高級瀏 覽器進行效果，交互，追加各種功能以達到更好用戶體驗,換句話說，就是以最低要求，實現最基礎功能為基本，向上兼容。以css為例，以下這種寫法就是漸進增強。
一開始針對一個高版本的瀏覽器構建頁面，先完善所有的功能。然後針對各個不同的瀏覽器進行測試，修復，保證低級瀏覽器也有基本功能 就好，低級瀏覽器被認為「簡陋卻無妨 (poor, but passable)」 可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較 大的錯誤之外，其它的差異將被直接忽略。也就是以高要求，高版本為基準，向下兼容。同樣以css為例，優雅降級的寫法如下。
漸進增強，開發時間長，成本高，優雅降級，節約成本，開發周期短。